/* Drawing modes: الهاتف المكسور + تحفة + تعدد */
.home-screen{justify-content:flex-start!important;padding-top:22px}
.home-screen .hero{max-width:720px;margin:10px auto 20px;padding:0 12px}
.home-screen .hero-kicker{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:5px 10px;border-radius:999px;background:rgba(245,158,11,.075);border:1px solid rgba(245,158,11,.14);color:#fbbf24;font-size:.5rem;font-weight:900;letter-spacing:.02em}
.home-screen .hero h1{font-size:clamp(1.9rem,4.8vw,3rem);line-height:1.15;margin:9px 0 7px;letter-spacing:-.03em}
.home-screen .hero h1 b{color:#f59e0b}
.home-screen .hero p{max-width:620px;color:#818188;font-size:.63rem;line-height:1.85}
.mode-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px auto 16px;max-width:1100px;width:100%}
.mode-card{--accent:#f59e0b;--accent-rgb:245,158,11;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:22px;background:linear-gradient(180deg,rgba(24,24,24,.97),rgba(13,13,13,.99));padding:14px;min-height:326px;display:flex;flex-direction:column;box-shadow:0 18px 52px rgba(0,0,0,.22);transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .3s ease,background .3s ease}
.mode-card.masterpiece{--accent:#ea580c;--accent-rgb:234,88,12}
.mode-card.multi{--accent:#f59e0b;--accent-rgb:245,158,11}.mode-card.fastest{--accent:#f59e0b;--accent-rgb:245,158,11}
.mode-card:before{content:'';position:absolute;inset:0 auto auto 0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.82;pointer-events:none}
.mode-card:after{content:'';position:absolute;width:180px;height:180px;right:-80px;top:-105px;border-radius:50%;background:rgba(var(--accent-rgb),.12);filter:blur(34px);pointer-events:none}
.mode-card:hover{transform:translateY(-6px);border-color:rgba(var(--accent-rgb),.26);background:linear-gradient(180deg,rgba(27,27,27,.98),rgba(13,13,13,1));box-shadow:0 28px 72px rgba(0,0,0,.32),0 0 0 1px rgba(var(--accent-rgb),.035)}
.mode-card small{position:relative;z-index:2;align-self:flex-start;padding:4px 7px;border-radius:999px;background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.12);color:var(--accent);font-size:.48rem;font-weight:900}
.mode-card h2{position:relative;z-index:2;margin:8px 1px 5px;font-size:1.08rem;line-height:1.45}
.mode-card p{position:relative;z-index:2;color:#83838b;font-size:.58rem;line-height:1.85;flex:1;margin:0}
.mode-card .primary-btn{position:relative;z-index:2;width:100%;margin-top:14px;background:linear-gradient(135deg,var(--accent),rgba(var(--accent-rgb),.8));color:#111;border:0;box-shadow:0 9px 28px rgba(var(--accent-rgb),.11)}
.mode-card .primary-btn:hover{box-shadow:0 13px 34px rgba(var(--accent-rgb),.18);filter:brightness(1.04)}
.mode-art{position:relative;z-index:2;height:132px;margin:0 0 13px;border-radius:17px;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,rgba(var(--accent-rgb),.15),transparent 54%),linear-gradient(145deg,#151515,#0d0d0d);border:1px solid rgba(255,255,255,.055);overflow:hidden;isolation:isolate}
.mode-art:before{content:'';position:absolute;width:76px;height:76px;border-radius:22px;background:linear-gradient(145deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.035));border:1px solid rgba(var(--accent-rgb),.18);box-shadow:0 14px 28px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035);transform:rotate(-8deg);transition:transform .38s cubic-bezier(.16,1,.3,1)}
.mode-art:after{content:'';position:absolute;inset:10px;border-radius:13px;border:1px dashed rgba(var(--accent-rgb),.08);pointer-events:none}
.mode-art>span{position:relative;z-index:3;font-size:2.7rem;font-weight:900;color:#fff;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));transition:transform .38s cubic-bezier(.16,1,.3,1)}
.mode-art i{position:absolute;z-index:4;width:31px;height:31px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:.9rem;background:rgba(14,14,14,.88);border:1px solid rgba(var(--accent-rgb),.15);box-shadow:0 9px 20px rgba(0,0,0,.25);opacity:.92;transition:transform .38s cubic-bezier(.16,1,.3,1),border-color .25s ease}
.mode-art i:nth-child(2){right:18px;top:18px}.mode-art i:nth-child(3){left:20px;top:28px}.mode-art i:nth-child(4){left:50%;bottom:10px;transform:translateX(-50%)}
.mode-card:hover .mode-art:before{transform:rotate(-3deg) scale(1.06)}
.mode-card:hover .mode-art>span{transform:translateY(-2px) scale(1.05)}
.mode-card:hover .mode-art i{border-color:rgba(var(--accent-rgb),.28)}
.mode-card:hover .mode-art i:nth-child(2){transform:translate(3px,-3px) rotate(5deg)}
.mode-card:hover .mode-art i:nth-child(3){transform:translate(-3px,-2px) rotate(-5deg)}
.mode-card:hover .mode-art i:nth-child(4){transform:translateX(-50%) translateY(2px) scale(1.07)}
.join-strip{max-width:1100px;margin:0 auto;border:1px solid rgba(255,255,255,.06);border-radius:17px;background:linear-gradient(180deg,rgba(18,18,18,.9),rgba(13,13,13,.94));padding:12px 13px;display:flex;align-items:center;justify-content:space-between;gap:15px;box-shadow:0 12px 38px rgba(0,0,0,.15)}
.join-strip>div:first-child{display:flex;align-items:center;gap:10px}.join-strip>div:first-child>span{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.11);color:#fbbf24;font-weight:900}.join-strip>div:first-child>div{display:grid}.join-strip b{font-size:.64rem}.join-strip small{color:#73737a;font-size:.48rem}.join-strip .join-row{margin:0;min-width:300px}
.setting input{width:100%;margin-top:7px;background:#111;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:10px 12px;color:#fff;font-family:Cairo,sans-serif;outline:none}.setting input:focus{border-color:rgba(245,158,11,.45)}.setting-note{font-size:.52rem;color:#888;line-height:1.75;padding:10px 12px;border-radius:12px;background:rgba(245,158,11,.055);border:1px solid rgba(245,158,11,.1)}
.studio-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:15px;margin-bottom:14px;padding:2px 2px 8px}.studio-head small{color:#f59e0b;font-weight:900;font-size:.57rem}.studio-head h1{font-size:clamp(1.25rem,3.4vw,2.2rem);margin-top:3px;line-height:1.35}.studio-clock{text-align:left;display:grid;padding:10px 14px;border-radius:15px;background:#121212;border:1px solid rgba(255,255,255,.07);min-width:126px}.studio-clock small{color:#777;font-size:.47rem}.studio-clock b{font:900 1rem JetBrains Mono,Cairo;color:#f59e0b}.studio-player{max-width:1000px;margin:0 auto}.studio-drawing{width:100%}.studio-canvas-wrap{position:relative}.canvas-locked{position:absolute;inset:0;z-index:6;display:grid;place-items:center;align-content:center;text-align:center;gap:6px;background:rgba(12,12,12,.72);backdrop-filter:blur(4px);color:#fff;border-radius:inherit}.canvas-locked span{font-size:2.4rem}.canvas-locked b{font-size:.8rem}.autosave-row{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:7px;padding:10px 4px 2px;color:#888}.autosave-row b{font-size:.55rem;color:#bcbcbc}.autosave-row small{font-size:.48rem}.autosave-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.08)}
.studio-host{display:grid;gap:16px}.host-control{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 18px;border-radius:20px;background:linear-gradient(100deg,rgba(245,158,11,.09),rgba(255,255,255,.018));border:1px solid rgba(245,158,11,.14)}.host-control small{color:#f59e0b;font-size:.52rem;font-weight:900}.host-control h2{font-size:1rem;margin:3px 0}.host-control p{color:#858585;font-size:.56rem;line-height:1.7}.stop-big{min-width:145px;padding:11px 16px}.drawers-progress{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.progress-person{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:14px;background:#121212;border:1px solid rgba(255,255,255,.06)}.progress-person>img{width:36px;height:36px;border-radius:10px;object-fit:cover}.progress-person>span{display:grid;flex:1}.progress-person b{font-size:.58rem}.progress-person small{font-size:.46rem;color:#777}.progress-person>i{font-style:normal;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#1a1a1a;color:#777}.progress-person>i.ready{color:#86efac;background:rgba(34,197,94,.08)}
.live-monitor{display:grid;gap:10px}.monitor-head{display:flex;align-items:end;justify-content:space-between}.monitor-head small{color:#f59e0b;font-size:.5rem;font-weight:900}.monitor-head h2{font-size:.95rem}.monitor-head>span{font:900 .8rem JetBrains Mono;color:#888}.monitor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.monitor-card{border:1px solid rgba(255,255,255,.065);border-radius:16px;background:#111;padding:0;overflow:hidden;color:#fff;text-align:inherit;cursor:pointer;transition:.2s}.monitor-card:hover{transform:translateY(-2px);border-color:rgba(245,158,11,.28)}.monitor-preview{position:relative;aspect-ratio:3/2;background:#f7f7f4;overflow:hidden}.monitor-preview>img{width:100%;height:100%;object-fit:contain;display:block}.monitor-empty{height:100%;display:grid;place-items:center;color:#8b8b8b;font-size:.53rem;background:#eee}.live-badge{position:absolute;top:8px;right:8px;padding:3px 6px;border-radius:999px;background:rgba(10,10,10,.76);color:#fbbf24;font-size:.43rem;font-weight:900}.monitor-person{display:flex;align-items:center;gap:8px;padding:9px}.monitor-person>img{width:31px;height:31px;border-radius:9px;object-fit:cover}.monitor-person>span{display:grid}.monitor-person b{font-size:.54rem}.monitor-person small{font-size:.43rem;color:#777}
.gallery-head{text-align:center;margin:5px auto 20px}.gallery-head small{color:#f59e0b;font-size:.56rem;font-weight:900}.gallery-head h1{font-size:clamp(1.6rem,4vw,2.7rem);margin:4px}.gallery-head p{color:#aaa;font-size:.72rem}.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.gallery-card{overflow:hidden;border-radius:18px;background:#121212;border:1px solid rgba(255,255,255,.065)}.gallery-image{aspect-ratio:3/2;background:#f4f4f0;cursor:zoom-in;overflow:hidden}.gallery-image img{width:100%;height:100%;object-fit:contain;display:block}.gallery-empty{height:100%;display:grid;place-items:center;color:#8d8d8d;font-size:.6rem}.gallery-person{display:flex;align-items:center;gap:8px;padding:10px}.gallery-person img{width:34px;height:34px;border-radius:10px;object-fit:cover}.gallery-person b{font-size:.6rem}.gallery-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px}.viewer-card{width:min(920px,calc(100% - 20px))!important}.viewer-card>img{width:100%;max-height:72vh;object-fit:contain;border-radius:15px;background:#f5f5f2}.viewer-empty{min-height:330px;display:grid;place-items:center;background:#eee;color:#888;border-radius:15px}.play-leave{margin-top:16px}
.drawing-live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.07)}
@media(max-width:900px){.mode-grid{grid-template-columns:1fr 1fr}.mode-card.multi{grid-column:auto}.monitor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.home-screen{padding-top:8px!important}.home-screen .hero{margin-bottom:15px}.home-screen .hero h1{font-size:2rem}.mode-grid{grid-template-columns:1fr;gap:11px;margin-top:12px}.mode-card.multi{grid-column:auto}.mode-card{min-height:0;padding:12px;border-radius:18px}.mode-art{height:108px;margin-bottom:11px}.mode-art:before{width:65px;height:65px;border-radius:18px}.mode-art>span{font-size:2.3rem}.mode-art i{width:28px;height:28px;font-size:.8rem}.join-strip{align-items:stretch;flex-direction:column}.join-strip .join-row{min-width:0;width:100%}.studio-head{grid-template-columns:1fr}.studio-clock{text-align:right;width:max-content}.host-control{align-items:stretch;flex-direction:column}.stop-big{width:100%}.drawers-progress,.monitor-grid,.gallery-grid{grid-template-columns:1fr}.autosave-row{grid-template-columns:auto 1fr}.autosave-row small{grid-column:1/-1;padding-right:14px}}
@media(hover:none){.mode-card:hover,.monitor-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.mode-card,.mode-art>*{transition:none!important}.mode-card:hover .mode-art>*{transform:none!important}}