@import "https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;700&family=Cinzel:wght@700&family=Montserrat:wght@300;500&family=Scheherazade+New:wght@400;700&display=swap";
:root{--primary-pine:#064e3b;--accent-turquoise:#2dd4bf;--river-teal:#0d9488;--snow-white:#f8fafc;--bg-dark:#020617;--keyboard-bg:#0f172afa;--key-bg:#1e293b;--delete-key:#991b1b;--font-logo:"Cinzel", serif;--font-tagline:"Montserrat", sans-serif;--font-urdu:"Scheherazade New", serif;--bg-card-default:transparent;--bg-card-red:#3b1818;--bg-card-yellow:#3c3518;--bg-card-green:#183c27;--bg-card-blue:#18263c;--bg-card-purple:#2b183c}body,html{background-color:var(--bg-dark);height:100%;color:var(--snow-white);font-family:var(--font-tagline);margin:0;padding:0;overflow:hidden}.app-wrapper{background-color:var(--bg-dark);border-left:1px solid #2dd4bf1a;border-right:1px solid #2dd4bf1a;flex-direction:column;max-width:480px;height:100dvh;margin:0 auto;display:flex;box-shadow:0 0 40px #000c}header{text-align:left;background:linear-gradient(to bottom, var(--primary-pine), transparent);padding:15px 10px 5px}.logo{font-family:var(--font-urdu), var(--font-logo);letter-spacing:1px;margin:0;font-size:1.4rem}.tagline{text-transform:uppercase;letter-spacing:2px;color:var(--accent-turquoise);text-align:left;margin-top:4px;font-size:.65rem}.top-section{flex-direction:column;flex:1;gap:10px;padding:10px 20px;display:flex}#display-area{color:#fff;resize:none;box-sizing:border-box;width:100%;font-size:28px;line-height:2.3;font-family:var(--font-urdu);text-align:right;caret-color:var(--accent-turquoise);direction:rtl;background:0 0;border:none;outline:none;flex:1;padding:10px}.keyboard-container{background:var(--keyboard-bg);padding:10px 4px calc(48px + env(safe-area-inset-bottom));border-top:1px solid #2dd4bf33;border-radius:20px 20px 0 0}.suggestion-bar{white-space:nowrap;scrollbar-width:none;border-bottom:1px solid #2dd4bf1a;border-radius:14px;align-items:center;gap:8px;min-height:45px;margin-bottom:8px;padding-bottom:8px;padding-left:8px;display:flex;overflow-x:auto}.suggestion-bar::-webkit-scrollbar{display:none}.suggestion-item{color:var(--accent-turquoise);font-family:var(--font-urdu);cursor:pointer;background:#2dd4bf1a;border:1px solid #2dd4bf33;border-radius:20px;padding:6px 16px;font-size:16px}.row{justify-content:center;gap:5px;margin-bottom:8px;display:flex}.key{background:var(--key-bg);color:var(--snow-white);-webkit-user-select:none;user-select:none;border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;height:52px;font-size:18px;transition:transform 50ms;display:flex;position:relative;box-shadow:0 2px #000}.key:active{color:var(--bg-dark);transform:translateY(2px);background:var(--accent-turquoise)!important}.shina-font .key{font-family:var(--font-urdu)}.key.wide{flex:1.2}.key.space{background:#0f172a;flex:3.5;font-size:10px}.key.delete{background:var(--delete-key)!important}.key.enter{font-size:10px;background:var(--river-teal)!important}.key.mode-toggle{background:#334155;font-size:10px}.key.shift-on{color:var(--bg-dark);background:var(--accent-turquoise)!important}.key.diacritic{font-family:var(--font-urdu);font-size:32px}.key[data-long]:after{content:"•";color:var(--accent-turquoise);font-size:11px;position:absolute;top:2px;right:4px}#toast{background:var(--accent-turquoise);color:var(--bg-dark);opacity:0;pointer-events:none;z-index:100;border-radius:30px;padding:10px 20px;font-weight:700;transition:all .3s;position:fixed;top:40px;left:50%;transform:translate(-50%)}.header-container{background:linear-gradient(to bottom, var(--primary-pine), transparent);justify-content:space-between;align-items:center;padding:15px 20px 5px;display:flex}.header-container header{background:0 0;flex:1;align-items:center;gap:12px;padding:0;display:flex}.btn-settings-toggle{cursor:pointer;color:var(--snow-white);background:0 0;border:none;justify-content:center;align-items:center;padding:5px;font-size:20px;transition:transform .3s;display:flex}.btn-settings-toggle:hover{color:var(--accent-turquoise);transform:rotate(45deg)}.settings-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-sizing:border-box;z-index:90;background:#0f172af2;border:1px solid #2dd4bf33;border-radius:12px;width:calc(100% - 40px);max-width:440px;padding:20px;transition:all .3s;position:absolute;top:60px;left:50%;transform:translate(-50%);box-shadow:0 10px 25px #00000080}.settings-card{background:#1e293b80;border:1px solid #2dd4bf26;border-radius:8px;justify-content:space-between;align-items:center;margin-top:10px;padding:15px;transition:transform .2s,border-color .2s;display:flex}.settings-card:hover{border-color:var(--accent-turquoise);cursor:pointer;transform:translateY(-2px)}.settings-card-content h3{color:var(--snow-white);margin:0 0 5px;font-size:14px}.settings-card-content p{color:#f8fafcb3;margin:0;font-size:11px}.settings-card-arrow{color:var(--accent-turquoise);font-size:18px;font-weight:700}.about-wrapper{background-color:var(--bg-dark);border-left:1px solid #2dd4bf1a;border-right:1px solid #2dd4bf1a;flex-direction:column;max-width:480px;height:100dvh;margin:0 auto;display:flex;overflow-y:auto;box-shadow:0 0 40px #000c}.about-header{background:linear-gradient(to bottom, var(--primary-pine), transparent);justify-content:center;align-items:center;padding:20px;display:flex;position:relative}.btn-back{color:var(--accent-turquoise);background:#2dd4bf26;border:1px solid #2dd4bf4d;border-radius:20px;padding:6px 14px;font-size:11px;font-weight:700;text-decoration:none;transition:background .2s,color .2s;position:absolute;left:20px}.btn-back:hover{background:var(--accent-turquoise);color:var(--bg-dark)}.about-content{flex-direction:column;gap:24px;padding:20px;display:flex}.about-content h2{color:var(--accent-turquoise);letter-spacing:1px;border-bottom:1px solid #2dd4bf33;margin:0 0 12px;padding-bottom:6px;font-size:1.1rem}.team-grid{flex-direction:column;gap:12px;display:flex}.member-card{background:#1e293b66;border:1px solid #ffffff0d;border-radius:10px;padding:15px;transition:transform .2s}.member-card:hover{border-color:#2dd4bf33;transform:translateY(-2px)}.member-header{align-items:center;gap:12px;margin-bottom:8px;display:flex}.member-emoji{background:#2dd4bf1a;border-radius:8px;padding:6px;font-size:24px;display:inline-block}.member-header h3{margin:0;font-size:15px}.member-role{color:var(--accent-turquoise);text-transform:uppercase;letter-spacing:1px;font-size:11px}.member-desc{color:#f8fafccc;margin:0;font-size:12px;line-height:1.5}.credits-card{background:#064e3b33;border:1px solid #2dd4bf33;border-radius:10px;padding:15px}.credits-card p{margin:0 0 10px;font-size:12px;line-height:1.6}.credits-card p:last-child{margin-bottom:0}.credits-footnote{color:#f8fafc80;text-align:center;margin-top:15px;font-size:10px!important}.diacritic-btn-content{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.diacritic-mark{font-family:var(--font-urdu);pointer-events:none;font-size:34px;line-height:1;position:absolute;left:50%}.diacritic-mark.above{top:62%;transform:translate(-50%,-50%)}.diacritic-mark.below{top:38%;transform:translate(-50%,-50%)}.btn-notes-toggle{color:var(--accent-turquoise);cursor:pointer;background:#2dd4bf26;border:1px solid #2dd4bf4d;border-radius:20px;align-items:center;gap:5px;padding:6px 14px;font-size:11px;font-weight:700;transition:background .2s,color .2s;display:flex}.btn-notes-toggle:hover{background:var(--accent-turquoise);color:var(--bg-dark)}.top-section{transition:background-color .3s}.note-header-controls{justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;display:flex}.note-title-input{color:var(--snow-white);font-size:18px;font-weight:700;font-family:var(--font-urdu);background:0 0;border:none;border-bottom:1px solid #0000;outline:none;width:60%;transition:border-color .2s;text-align:left!important;direction:ltr!important}.note-title-input:focus{border-bottom-color:#2dd4bf33}.editor-actions{align-items:center;gap:8px;display:flex}.btn-new-note,.btn-delete-note,.btn-copy-note{color:var(--snow-white);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 2px 5px #0003}.btn-new-note svg,.btn-delete-note svg,.btn-copy-note svg{transition:stroke .2s}.btn-new-note:hover,.btn-delete-note:hover,.btn-copy-note:hover{border-color:var(--accent-turquoise);color:var(--accent-turquoise);background:#2dd4bf26;transform:scale(1.08);box-shadow:0 0 8px #2dd4bf4d}.btn-new-note:active,.btn-delete-note:active,.btn-copy-note:active{transform:scale(.95)}.color-picker{border-top:1px solid #ffffff0d;gap:8px;margin-top:10px;padding-top:8px;display:flex}.color-dot{cursor:pointer;border:1px solid #ffffff4d;border-radius:50%;width:14px;height:14px;padding:0;transition:transform .2s,border-color .2s}.color-dot:hover{transform:scale(1.2)}.color-dot.active{border-color:var(--accent-turquoise);box-shadow:0 0 6px var(--accent-turquoise)}.color-dot.default{background:#1e293b}.color-dot.red{background:#ef4444}.color-dot.yellow{background:#eab308}.color-dot.green{background:#22c55e}.color-dot.blue{background:#3b82f6}.color-dot.purple{background:#a855f7}.notes-drawer-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:150;background:#0009;justify-content:flex-end;display:flex;position:fixed;inset:0}.notes-drawer{background:var(--bg-dark);box-sizing:border-box;border-left:1px solid #2dd4bf26;flex-direction:column;width:100%;max-width:420px;height:100%;padding:24px;animation:.3s cubic-bezier(.16,1,.3,1) drawerSlideIn;display:flex;box-shadow:-10px 0 40px #0009}@keyframes drawerSlideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.drawer-header{border-bottom:1px solid #2dd4bf26;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;display:flex}.drawer-header h2{font-size:18px;font-family:var(--font-logo);letter-spacing:1px;color:var(--accent-turquoise);margin:0}.btn-close-drawer{color:var(--snow-white);cursor:pointer;background:#ffffff0d;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;transition:background-color .2s;display:flex}.btn-close-drawer:hover{color:#ef4444;background:#ef444433}.notes-grid{scrollbar-width:thin;scrollbar-color:#2dd4bf33 transparent;flex-direction:column;flex:1;gap:16px;padding-right:4px;display:flex;overflow-y:auto}.notes-grid::-webkit-scrollbar{width:4px}.notes-grid::-webkit-scrollbar-thumb{background:#2dd4bf33;border-radius:4px}.empty-notes-message{text-align:center;color:#f8fafc80;padding:60px 20px}.empty-notes-message p{margin:0 0 6px;font-size:15px;font-weight:500}.empty-notes-message .subtext{color:#f8fafc59;font-size:12px}.note-card{cursor:pointer;background:#1e293b73;border:1px solid #ffffff0f;border-radius:12px;padding:16px;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative;box-shadow:0 4px 8px #00000026}.note-card:hover{border-color:var(--accent-turquoise);transform:translateY(-2px);box-shadow:0 6px 12px #2dd4bf1a}.note-card-header{justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px;display:flex}.note-card-header h4{color:var(--snow-white);font-size:14px;font-weight:600;font-family:var(--font-urdu);white-space:nowrap;text-overflow:ellipsis;max-width:80%;margin:0;overflow:hidden}.btn-card-delete{color:#ffffff80;cursor:pointer;opacity:0;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;transition:opacity .2s,background-color .2s,border-color .2s,color .2s,transform .2s;display:flex}.btn-card-delete svg{transition:stroke .2s}.note-card:hover .btn-card-delete{opacity:.7}.btn-card-delete:hover{color:#ef4444;background:#ef444426;border-color:#ef4444;transform:scale(1.1);opacity:1!important}.note-card-content{color:#f8fafcb3;font-size:13px;line-height:1.5;font-family:var(--font-urdu);-webkit-line-clamp:3;text-overflow:ellipsis;-webkit-box-orient:vertical;margin:0 0 10px;display:-webkit-box;overflow:hidden}.note-card-date{color:#f8fafc66;font-size:9px;font-family:var(--font-tagline);text-transform:uppercase;letter-spacing:.5px}.note-bg-default{background:#1e293b73;border-color:#ffffff0f}.note-bg-red{background:#42202080;border-color:#ef444440}.note-bg-yellow{background:#423d2080;border-color:#eab30840}.note-bg-green{background:#20422d80;border-color:#22c55e40}.note-bg-blue{background:#202c4280;border-color:#3b82f640}.note-bg-purple{background:#34204280;border-color:#a855f740}