:root{--ink:#18212f;--muted:#778294;--line:#e8ecf2;--blue:#2f6df6;--blue-dark:#2057d0;--soft:#edf3ff;--cream:#fbfaf7;--white:#fff;--navy:#172235;--mint:#dff9ef;--success:#27b184;--danger:#e45c74;--shadow:0 18px 50px rgba(24,33,47,.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Cairo,Arial,sans-serif}button,input,select{font:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:255px;position:fixed;inset:0 auto 0 0;background:var(--navy);color:#fff;padding:30px 20px;z-index:5}.brand{font-weight:800;font-size:26px;display:flex;align-items:center;gap:10px}.brand-symbol{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:#4d7eff;box-shadow:0 8px 20px #2f6df655}.brand-subtitle{color:#aeb8c8;font-size:12px;margin:9px 0 42px}.main-nav{display:grid;gap:8px}.nav-link{color:#aeb8c8;text-decoration:none;padding:14px 15px;border-radius:12px;font-size:14px;display:flex;align-items:center;gap:12px;transition:.2s}.nav-link:hover,.nav-link.active{color:#fff;background:#263a59}.nav-icon{font-size:20px}.sidebar-status{position:absolute;bottom:75px;left:20px;right:20px;display:flex;gap:10px;align-items:flex-start;background:#20314d;border:1px solid #304767;border-radius:16px;padding:15px;font-size:12px}.status-light{width:9px;height:9px;border-radius:50%;background:#54d9a6;box-shadow:0 0 0 5px #54d9a622;margin-top:4px}.sidebar-status strong,.sidebar-status small{display:block}.sidebar-status small{color:#aeb8c8;font-size:10px;margin-top:5px}.sidebar-footer{position:absolute;bottom:28px;left:20px;right:20px;text-align:center;color:#70809a;font-size:10px}.main-content{margin-left:255px;width:calc(100% - 255px);max-width:1550px;padding:55px 7vw 70px}.hero-header,.panel-heading,.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.hero-header{margin-bottom:42px}.eyebrow,.step-label{color:var(--blue);font-size:11px;letter-spacing:.1em;font-weight:800}.hero-copy h1{font-size:clamp(32px,4.5vw,56px);line-height:1.2;letter-spacing:-.04em;margin:12px 0 9px}.hero-copy h1 em{font-style:normal;color:var(--blue)}.hero-copy p{margin:0;color:var(--muted);font-size:15px}.privacy-chip{background:#fff;border:1px solid var(--line);border-radius:40px;padding:12px 16px;color:#687385;font-size:11px;white-space:nowrap}.green-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);margin-left:7px}.workspace-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:22px}.panel{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}h2{font-size:19px;margin:5px 0 18px}.live-badge{background:#fff1f4;color:var(--danger);border-radius:20px;padding:5px 10px;font-size:10px;letter-spacing:.08em}.live-badge i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--danger);margin-left:5px}.camera-stage{height:360px;border-radius:16px;background:#182235;overflow:hidden;position:relative;display:grid;place-items:center}.camera-stage video{display:none;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-stage canvas{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1);pointer-events:none}.camera-placeholder{display:grid;place-items:center;gap:7px;color:#aeb8c8;text-align:center}.camera-placeholder-icon{width:62px;height:62px;border-radius:18px;background:#263a59;display:grid;place-items:center;color:#6f9aff;font-size:28px;margin-bottom:7px}.camera-placeholder strong{color:#e4eaf4;font-size:14px}.camera-placeholder span{font-size:11px}.tracking-pill{display:none;position:absolute;right:13px;bottom:42px;background:#172235dd;color:#fff;border:1px solid #ffffff2b;border-radius:10px;padding:7px 10px;font-size:11px}.tracking-pill span:first-child{display:inline-block;width:7px;height:7px;background:#54d9a6;border-radius:50%;margin-left:5px}.camera-help{position:absolute;left:13px;bottom:13px;display:flex;gap:6px;flex-wrap:wrap}.camera-help span{background:#172235aa;color:#cfd8e6;border-radius:7px;padding:5px 7px;font-size:9px}.camera-controls{display:flex;align-items:center;gap:9px;margin-top:17px}.button{border:0;border-radius:10px;padding:11px 15px;cursor:pointer;transition:.2s}.button:disabled{opacity:.45;cursor:not-allowed}.primary-button{background:var(--blue);color:#fff;font-weight:800;box-shadow:0 8px 18px #2f6df633}.primary-button:hover{background:var(--blue-dark)}.neutral-button,.square-button,.stop-audio-button{background:#f4f6fa;color:#657185}.square-button{margin-right:auto;font-size:19px;padding:8px 12px}.camera-note{display:flex;gap:6px;color:#9aa4b3;font-size:11px;margin-top:15px}.clear-button{border:0;background:none;color:#7890c7;font-size:11px;cursor:pointer}.translation-box{min-height:220px;background:#f8faff;border:1px dashed #cbd8f8;border-radius:16px;display:grid;place-items:center;text-align:center;padding:25px}.empty-state{color:#93a0b2}.empty-sparkle{font-size:29px;color:#6f9aff}.empty-state p{color:#657185;font-size:14px;margin:7px 0 1px}.empty-state small{font-size:11px}.detected-result{display:none;color:var(--blue);font-size:32px;font-weight:800}.translation-toolbar{display:flex;align-items:center;gap:9px;margin-top:16px}.audio-button{background:var(--soft);color:var(--blue);font-weight:800}.confidence-label{font-size:11px;color:#8b96a6;margin-right:auto}.voice-preview{display:flex;align-items:center;gap:12px;background:#f7fafc;border-radius:12px;padding:11px 13px;margin-top:17px}.voice-preview strong,.voice-preview small{display:block}.voice-preview strong{font-size:11px}.voice-preview small{font-size:10px;color:#8c97a8;margin-top:3px}.voice-wave{display:flex;align-items:center;gap:3px;height:25px}.voice-wave i{display:block;width:3px;height:9px;background:var(--blue);border-radius:5px}.voice-wave i:nth-child(2){height:17px}.voice-wave i:nth-child(3){height:24px}.voice-wave i:nth-child(4){height:14px}.voice-wave i:nth-child(5){height:20px}.quick-test{border-top:1px solid var(--line);margin-top:22px;padding-top:17px}.quick-title{color:#8c97a8;font-size:11px}.quick-buttons{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.quick-buttons button{border:0;background:#f6f7fa;color:#465367;border-radius:8px;padding:8px 10px;font-size:11px;cursor:pointer}.quick-buttons button:hover{background:var(--soft);color:var(--blue)}.section-block{margin-top:40px}.section-heading{margin-bottom:15px}.section-note,.audio-support{color:#9aa4b3;font-size:11px}.gesture-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.gesture-card{position:relative;border:1px solid var(--line);background:#fff;border-radius:16px;padding:17px;text-align:center;cursor:pointer;transition:.2s}.gesture-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cbd8f8}.gesture-illustration{display:grid;place-items:center;font-size:39px;background:#f7f9fc;border-radius:13px;padding:14px;margin-bottom:10px}.gesture-card strong,.gesture-card small{display:block}.gesture-card strong{font-size:13px}.gesture-card small{color:#99a3b1;font-size:10px;margin-top:3px}.gesture-sound{position:absolute;top:11px;left:11px;color:var(--blue);font-size:13px}.settings-panel{margin-top:28px}.settings-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin-bottom:17px}.settings-grid label{font-size:11px;color:#657185}.settings-grid select,.settings-grid input{display:block;width:100%;margin-top:8px}.settings-grid select{border:1px solid var(--line);border-radius:8px;padding:9px;background:#fff;color:var(--ink)}.settings-grid input{accent-color:var(--blue)}.settings-grid output{font-size:11px;color:var(--blue)}.secondary-button{background:var(--blue);color:#fff}.about-strip{display:flex;align-items:center;gap:15px;background:var(--mint);color:#0f8d69;border-radius:17px;padding:17px 20px;margin-top:25px}.about-mark{font-size:25px}.about-strip strong{font-size:13px}.about-strip p{font-size:11px;color:#428c77;margin:3px 0 0}.tech-stack{margin-right:auto;background:#ffffffaa;border-radius:20px;padding:7px 10px;font-size:10px;white-space:nowrap}@media(max-width:1050px){.sidebar{width:210px}.main-content{margin-left:210px;width:calc(100% - 210px);padding:42px 4vw}.workspace-grid{grid-template-columns:1fr}}@media(max-width:700px){.app-shell{display:block}.sidebar{position:static;width:100%;height:auto;padding:18px}.main-nav,.sidebar-status,.sidebar-footer,.brand-subtitle{display:none}.main-content{width:100%;margin:0;padding:30px 16px}.hero-header{display:block}.privacy-chip{display:inline-block;margin-top:18px}.gesture-grid,.settings-grid{grid-template-columns:1fr 1fr}.about-strip{align-items:flex-start;flex-wrap:wrap}.tech-stack{margin-right:0}.camera-stage{height:275px}}@media(max-width:430px){.gesture-grid,.settings-grid{grid-template-columns:1fr}.translation-toolbar{flex-wrap:wrap}.confidence-label{width:100%;margin-right:0}}
/* ===========================
   قسم المكفوفين
=========================== */

#blind{
    background:#eef8ff;
    text-align:center;
    padding:60px 20px;
}

#blind h2{
    color:#004d66;
    font-size:35px;
    margin-bottom:20px;
}

#blind p{
    font-size:22px;
    line-height:2;
    margin-bottom:30px;
    color:#333;
}

#blind button{
    background:#0077b6;
    color:#fff;
    border:none;
    padding:15px 25px;
    margin:10px;
    border-radius:10px;
    font-size:18px;
    cursor:pointer;
    transition:0.3s;
}

#blind button:hover{
    background:#023e8a;
    transform:scale(1.05);
}

/* أزرار التحكم */

.accessibility{
    margin-top:25px;
}

.accessibility button{
    background:#2a9d8f;
}

.accessibility button:hover{
    background:#1f7a6b;
}

/* وضع التباين العالي */

.high-contrast{
    background:#000 !important;
    color:#fff !important;
}

.high-contrast button{
    background:#ffff00 !important;
    color:#000 !important;
}