@font-face{font-family:Cairo;src:url('../fonts/cairo-arabic.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Cairo;src:url('../fonts/cairo-latin.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD}
:root{--bg:#f6f8fc;--surface:#fff;--ink:#17263f;--muted:#66758b;--blue:#2963e9;--blue-dark:#194fc8;--line:#e6ebf3;--soft:#edf3ff;--danger:#b32b42;--radius:18px;--shadow:0 5px 24px #20365c04;--nav-height:72px;font-family:Cairo,system-ui,sans-serif;color:var(--ink);font-size:14px;line-height:1.7}
html{scroll-padding-block-end:calc(var(--nav-height) + env(safe-area-inset-bottom) + 20px)}input,textarea,select{scroll-margin-block:16px;scroll-margin-block-end:calc(var(--nav-height) + 20px)}*{box-sizing:border-box}body{margin:0;background:var(--bg);-webkit-tap-highlight-color:transparent}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button,select,input{min-height:44px}a{color:var(--blue);text-decoration:none}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}a,button{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #8fb4ff;outline-offset:3px}h1,h2,h3,p{margin:0}h1{font-size:clamp(23px,4.8vw,32px);font-weight:800;line-height:1.65;letter-spacing:-.6px}h1>span{color:var(--blue)}h2{font-size:15px;font-weight:800;display:flex;align-items:center;gap:9px}h3{font-size:14px;margin-block:10px 6px}small,.small-text{font-size:11px}hr{border:0;border-top:1px solid var(--line);margin-block:20px}[hidden]{display:none!important}.sprite{position:absolute;width:0;height:0;overflow:hidden}.skip{position:fixed;inset-block-start:-100px;background:var(--ink);color:white;padding:10px;z-index:10}.skip:focus{inset-block-start:5px}.muted{color:var(--muted)}.optional{font-size:11px;color:var(--muted);font-weight:400;margin-inline-start:5px}
.shell{padding-block-start:env(safe-area-inset-top);padding-block-end:calc(var(--nav-height) + env(safe-area-inset-bottom));min-height:100dvh}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-block-end:1px solid var(--line);background:#ffffffb8;gap:10px}.brand{display:flex;align-items:center;gap:10px;font-size:27px;line-height:1.2;font-weight:800;color:var(--ink);min-width:0}.brand small{display:block;font-size:9px;color:var(--muted);font-weight:500;margin-block-start:6px}.brand-mark{background:var(--blue);color:white;width:44px;height:44px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 5px 12px #2963e91a}.brand-mark svg{width:26px;height:26px;stroke-width:2}.header-actions{display:flex;align-items:center;gap:5px}.status-chip{display:flex;align-items:center;gap:6px;background:#edf2f8;color:#576780;border:1px solid #e1e8f2;border-radius:30px;font-size:10px;padding:5px 9px;white-space:nowrap}.status-chip i{width:5px;height:5px;border-radius:50%;background:#8392aa}.status-chip.ready{background:#edf8f2;border-color:#dceddf;color:#28704c}.status-chip.ready i{background:#3b9967}.status-chip.offline{background:#fff5e8;color:#916122;border-color:#f3e4cf}.status-chip.offline i{background:#c08b3c}.icon-button{min-width:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted);border-radius:12px}.icon-button:hover{background:var(--soft)}
.sidebar{position:fixed;inset-inline:0;inset-block-end:0;z-index:20;background:#ffffffee;border-block-start:1px solid var(--line);padding-block-end:env(safe-area-inset-bottom);backdrop-filter:blur(15px)}.navigation{display:flex;justify-content:space-around;height:var(--nav-height);padding:5px 10px;gap:6px}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;flex:1;max-width:140px;background:transparent;border:0;color:var(--muted);font-size:10px;font-weight:700;border-radius:12px;position:relative}.nav-item svg{width:21px;height:21px}.nav-item.active{color:var(--blue);background:#f0f5ff}.nav-count{display:none}.brand-side,.nav-caption,.sidebar-bottom{display:none}
main{padding:22px 16px 12px;max-width:1160px;margin-inline:auto}.page-intro{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-block-end:21px}.eyebrow{font-size:10px;color:var(--blue);font-weight:700;letter-spacing:.15px;display:block;margin-block-end:3px}.page-intro p{font-size:11px;color:var(--muted);margin-block-start:5px}.intro-wave{display:none;align-items:center;gap:3px;height:70px;padding:10px 18px;border:1px solid #e0e9fc;background:#eff4ff;border-radius:18px;color:#779ff9}.intro-wave i,.mini-wave i{width:3px;height:14px;background:currentColor;border-radius:4px}.intro-wave i:nth-child(3n){height:32px}.intro-wave i:nth-child(4n){height:42px}.intro-wave i:nth-child(5n){height:24px}.studio-grid{display:grid;gap:14px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-width:0}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-block-end:16px}.step-number{font-size:10px;color:var(--blue);background:var(--soft);border-radius:6px;width:25px;height:25px;display:grid;place-items:center;font-weight:700;letter-spacing:.2px}.tiny-badge{font-size:9px;font-weight:600;border:1px solid var(--line);background:#f9fbfe;padding:3px 8px;border-radius:7px;color:var(--muted);white-space:nowrap}.success-badge{background:#eff9f2;color:#36805a;border-color:#dfede3}
label,legend{font-size:12px;font-weight:700;display:block;margin-block-end:7px}input[type=text],input[type=password],input[type=number],input[type=search],textarea,select{width:100%;border:1px solid #dee5ef;border-radius:10px;color:var(--ink);background:#fff;padding:10px 12px;outline-offset:2px;min-width:0;font-size:14px}input::placeholder,textarea::placeholder{color:#96a1b1;font-weight:400;font-size:12px}textarea{resize:vertical;line-height:2;display:block;min-height:88px}select{appearance:auto;padding-inline-end:8px}label:not(:first-child){margin-block-start:14px}.label-row{display:flex;justify-content:space-between;align-items:center;margin-block-start:14px}.label-row label{margin-block:0 7px}.editor-label{font-size:9px;background:var(--soft);color:var(--blue);padding:1px 6px;border-radius:5px}.editor-card textarea{border-end-start-radius:0;border-end-end-radius:0;background:#fbfcff;min-height:250px;padding:14px;line-height:2.1}.editor-footer{border:1px solid #dee5ef;border-block-start:0;border-radius:0 0 10px 10px;display:flex;justify-content:space-between;padding:8px 12px;background:#fbfcff;color:var(--muted)}.editor-footer b{color:var(--ink);font-weight:700}.text-tools{display:flex;gap:4px;margin-block-start:9px;flex-wrap:wrap}.button{border:1px solid #dfe6f1;border-radius:10px;background:white;color:var(--ink);padding:9px 13px;display:inline-flex;justify-content:center;align-items:center;gap:7px;font-size:12px;font-weight:700;min-height:44px;max-width:100%;transition:background .15s,border-color .15s}.button:hover:not(:disabled){background:#f5f8ff;border-color:#b8cdf6}.button svg{width:18px;height:18px}.button.primary{background:var(--blue);border-color:var(--blue);color:white}.button.primary:hover:not(:disabled){background:var(--blue-dark);border-color:var(--blue-dark)}.button.quiet{border-color:transparent;background:transparent;color:var(--muted);padding-inline:10px}.button.danger-text,.danger-text{color:var(--danger)}.button.small{padding:6px 10px;font-size:11px}.button-row{display:flex;gap:7px;flex-wrap:wrap;margin-block-start:12px}.field-help{color:var(--muted);font-size:10px;line-height:1.9;margin-block-start:7px;overflow-wrap:anywhere}.field-help.error{color:var(--danger)}.editor-note{display:flex;gap:10px;background:#f8faff;border:1px dashed #dbe5f6;padding:12px;border-radius:10px;margin-block-start:16px;color:#7890b4}.editor-note svg{width:19px;height:19px}.editor-note p{color:var(--muted);font-size:11px}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.two-fields label{margin-block-start:0}.voice-test{width:100%;margin-block-start:10px;background:#f8faff;color:var(--blue);border-style:dashed;border-color:#d7e2f9}.mode-field{padding:0;margin:19px 0 0;border:0;min-width:0}.mode-field legend{padding:0}.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.mode-option{position:relative;margin:0!important;cursor:pointer;min-width:0}.mode-option input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}.mode-content{border:1px solid var(--line);border-radius:11px;background:#fcfdff;display:flex;flex-direction:column;align-items:center;padding:11px 2px;gap:2px;min-height:96px}.mode-content svg{width:21px;height:21px;color:#8190a6;margin-block-end:3px}.mode-content b{font-size:12px}.mode-content small{font-size:9px;color:var(--muted);font-weight:400}.mode-option input:checked+.mode-content{border-color:#8eaff8;box-shadow:inset 0 0 0 1px #8eaff8;background:#f0f5ff;color:var(--blue)}.mode-option input:checked+.mode-content svg{color:var(--blue)}.mode-option input:focus-visible+.mode-content{outline:3px solid #8fb4ff;outline-offset:2px}.accent-note{padding-inline-start:9px;border-inline-start:2px solid #cadbfc;margin-block-start:12px}.generate-card{padding-block:17px}.generate-card .section-heading{margin-block-end:8px}.model-label{font-size:9px;color:var(--muted);max-width:48%;overflow-wrap:anywhere}.generate-actions{display:flex;flex-wrap:wrap;gap:9px;margin-block-start:16px}.generate-actions>button{flex:1 1 130px;min-height:49px}.generate-actions>.primary{flex-grow:1.4}.preview-button{background:#f6f9ff;color:var(--blue);border-color:#dce7ff}.fine-print{font-size:9px;color:var(--muted);margin-block-start:6px;line-height:1.9}.banner{border:1px solid #dce7fb;border-radius:12px;background:#f0f5ff;color:#385582;padding:13px;display:flex;align-items:center;gap:10px;margin-block-end:14px;font-size:11px}.banner b{font-size:12px}.banner p{font-size:10px;margin-block-start:2px}.banner>.button{margin-inline-start:auto;flex-shrink:0}.banner.warning{background:#fff8ed;border-color:#f3e4ca;color:#8b6331}.banner.compact{padding:9px;margin-block-end:10px}.inline-error{color:#9b2f43;background:#fff3f4;border:1px solid #f1d9dd;border-radius:10px;padding:12px;font-size:12px;margin-block-start:14px}.generation-state{display:flex;align-items:center;gap:10px;background:#f3f7ff;border-radius:10px;padding:12px;margin-block-start:15px;font-size:12px}.generation-state p{font-size:10px;color:var(--muted);margin-block-start:2px}.generation-state>.button{margin-inline-start:auto;flex-shrink:0}.spinner{border:2px solid #cedbf6;border-top-color:var(--blue);border-radius:50%;width:18px;height:18px;animation:spin .8s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}
.player-card{margin-block-start:14px;border-color:#d7e3fb}.player-card h2{font-size:18px;overflow-wrap:anywhere}.player-card .section-heading{margin-block-end:7px}.player-timeline{display:flex;align-items:center;gap:10px;margin-block-start:14px;font-variant-numeric:tabular-nums;font-size:11px}.player-timeline input{min-width:0;flex:1;accent-color:var(--blue);cursor:pointer;min-height:44px}.playback-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-block-start:6px}.play-button{min-width:100px}.listening-speed{display:flex;align-items:center;justify-content:center;gap:10px;margin-block-start:15px;flex-wrap:wrap}.listening-speed label{margin:0;font-size:11px}.listening-speed select{width:75px;min-height:44px;font-size:12px;padding:5px}.listening-speed small{color:var(--muted);font-size:9px}.player-actions{border-block-start:1px solid var(--line);padding-block-start:15px;margin-block-start:17px;display:flex;gap:7px;flex-wrap:wrap}.search-box{display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--line);padding:4px 12px;border-radius:12px;color:#8795a9}.search-box input{border:0;background:transparent;padding-inline:0}.library-meta{display:flex;justify-content:space-between;margin:15px 2px 12px;font-size:11px;color:var(--muted)}.recordings-grid{display:grid;gap:12px}.recording-card h2{font-size:15px;overflow-wrap:anywhere}.recording-date{font-size:10px;color:var(--muted);margin-block-start:3px}.recording-tags{display:flex;gap:6px;flex-wrap:wrap;margin-block:12px}.recording-tags span{font-size:9px;border-radius:5px;padding:2px 7px;background:#f4f7fc;color:var(--muted)}.recording-excerpt{font-size:11px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.recording-actions{display:flex;gap:5px;flex-wrap:wrap;margin-block-start:12px}.recording-actions .button{font-size:10px;padding:7px 9px}.empty-state{text-align:center;padding:40px 22px}.empty-icon{width:58px;height:58px;display:inline-flex;align-items:center;justify-content:center;background:var(--soft);color:var(--blue);border-radius:18px;margin-block-end:14px}.empty-icon svg{width:27px;height:27px}.empty-state h2{justify-content:center;font-size:18px}.empty-state p{font-size:12px;color:var(--muted);max-width:300px;margin:9px auto 18px}.local-note{font-size:10px;color:var(--muted);margin-block:18px 5px;display:flex;align-items:flex-start;gap:8px}.local-note svg{width:17px;height:17px;flex-shrink:0}.settings-grid{display:grid;gap:14px}.key-label{text-align:start}.key-input{display:flex;align-items:center;border:1px solid #dee5ef;border-radius:10px;padding-inline-end:4px}.key-input input{border:0;min-width:0;background:transparent}.key-input input::placeholder{text-align:right;font-family:Cairo,system-ui,sans-serif}.key-input .button{flex-shrink:0}.text-link{font-size:11px;display:inline-flex;align-items:center;min-height:44px;margin-block-start:7px}.privacy-note{display:flex;gap:9px;background:#f5f8fc;color:#7e91ad;border-radius:10px;padding:11px;font-size:10px;margin-block-start:8px}.privacy-note p{color:var(--muted)}.privacy-note svg{width:18px;height:18px}.full-width{width:100%;margin-block-start:17px}.about-card{display:flex;align-items:flex-start;gap:14px}.about-card p{font-size:11px;color:var(--muted);margin-block-start:5px}.app-footer{text-align:center;color:#95a0b2;font-size:9px;padding:20px 15px}.app-footer span{padding-inline:8px}.toast{position:fixed;inset-inline:18px;inset-block-end:calc(var(--nav-height) + env(safe-area-inset-bottom) + 12px);padding:12px 16px;border-radius:12px;background:#20334e;color:white;font-size:12px;z-index:50;max-width:500px;margin-inline:auto;box-shadow:0 8px 30px #10203825;overflow-wrap:anywhere}.keyboard-open .sidebar{visibility:hidden}.keyboard-open .toast{inset-block-end:16px}
@media(min-width:430px){main{padding-inline:22px}.card{padding:20px}.intro-wave{display:flex;gap:2px;padding:10px}.intro-wave i{width:2px}.page-intro h1{font-size:26px}}
@media(min-width:768px){.shell{padding-inline-start:218px;padding-block-end:0}.sidebar{inset-inline-start:0;inset-inline-end:auto;inset-block:0;width:218px;border-block-start:0;border-inline-end:1px solid var(--line);padding:28px 16px 20px;background:#fff;display:flex;flex-direction:column;backdrop-filter:none}.brand-side{display:flex;margin-inline:6px;font-size:30px}.brand-side .brand-mark{width:42px;height:42px}.brand-side small{font-size:8px}.nav-caption{display:block;font-size:9px;color:#97a3b5;margin:41px 16px 12px}.navigation{height:auto;display:flex;flex-direction:column;padding:0;gap:7px}.nav-item{flex-direction:row;justify-content:flex-start;max-width:none;flex:initial;min-height:48px;padding-inline:15px;gap:12px;font-size:12px}.nav-item svg{width:21px;height:21px}.nav-item.active{background:var(--soft)}.nav-count{display:inline-block;margin-inline-start:auto;font-size:9px;background:#e1ebff;padding:0 6px;border-radius:5px}.sidebar-bottom{display:block;margin-block-start:auto;padding:25px 14px 0}.sidebar-bottom b{font-size:12px;display:block;margin-block-start:10px}.sidebar-bottom p{font-size:9px;color:var(--muted);margin-block-start:5px}.version{font-size:9px;color:#98a4b6;display:block;margin-block-start:24px}.mini-wave{display:flex;align-items:center;color:#91b1f5;gap:3px;height:34px}.mini-wave i{width:2px}.mini-wave i:nth-child(2n){height:28px}.mini-wave i:nth-child(3n){height:22px}.topbar{height:80px;padding-inline:30px}.topbar .brand{font-size:22px}.topbar .brand .brand-mark{width:34px;height:34px;border-radius:10px}.topbar .brand small{display:none}.topbar .brand-mark svg{width:21px;height:21px}main{padding:28px 26px 10px}.page-intro{margin-block-end:23px}.page-intro h1{font-size:29px}.page-intro p{font-size:12px}.intro-wave{padding-inline:18px;gap:4px}.studio-grid{gap:17px}.toast{inset-block-end:24px;inset-inline-start:240px}.keyboard-open .sidebar{visibility:visible}.recordings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-grid{gap:17px}.header-actions{gap:10px}.status-chip{font-size:11px}}
@media(min-width:1100px){.shell{padding-inline-start:240px}.sidebar{width:240px;padding-inline:20px}.studio-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);align-items:start}.generate-card{grid-column:1/-1}.card{padding:22px}.editor-card textarea{min-height:320px}.editor-note{margin-block-start:20px}.editor-card{height:100%}.generate-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 20px;align-items:center}.generate-card .generate-actions{margin:0}.generate-card>p,.generate-card>.generation-state,.generate-card>.inline-error{grid-column:1/-1}.generation-info .section-heading{justify-content:flex-start;gap:20px}.model-label{max-width:none}.generate-actions button{flex-basis:auto}.settings-grid{grid-template-columns:1.15fr 1fr;align-items:start}.about-card{grid-column:1/-1}.page-intro{margin-block-end:25px}.topbar{padding-inline:38px}main{padding-inline:32px}.toast{inset-inline-start:260px}.recordings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:374px){.topbar{padding-inline:14px}.brand{gap:7px;font-size:25px}.brand small{font-size:8px}.brand-mark{width:40px;height:40px}.header-actions{gap:0}.status-chip{font-size:9px;padding-inline:7px}main{padding-inline:12px}.card{padding:15px}.mode-grid{gap:5px}.generate-actions{gap:7px}.generation-state{flex-wrap:wrap}.generation-state>.button{margin-inline-start:auto}.page-intro h1{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important;scroll-behavior:auto!important}}