:root { color-scheme: dark; --ink:#f5f7fb; --muted:#aab5ca; --panel:#182338; --panel-2:#202e46; --line:#34435f; --blue:#68a7ff; --teal:#5de2c6; --danger:#ff8999; --shadow:0 24px 70px #05091580; font-family:Inter, ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 85% 0,#243f6d 0,transparent 38rem),radial-gradient(circle at -10% 75%,#194c55 0,transparent 35rem),#101827; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.shell { width:min(1120px,calc(100% - 40px)); margin:auto; padding:22px 0 72px; }
.topbar { height:55px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:1.05rem; font-weight:750; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:28px; height:28px; color:#0d1727; border-radius:9px; background:linear-gradient(135deg,var(--teal),var(--blue)); font-size:12px; }
.pill { padding:7px 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.78rem; }
.pill.ok { color:#0b312d; background:var(--teal); border-color:var(--teal); }
.pill.warn { color:#4a3100; background:#ffd275; border-color:#ffd275; }
.screen { margin-top:52px; }
.hero { max-width:760px; padding:50px 0 10px; }
.eyebrow,.step { margin:0 0 12px; color:var(--teal); font-size:.72rem; font-weight:800; letter-spacing:.12em; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:16px; font-size:clamp(2.55rem,6vw,5.6rem); line-height:.98; letter-spacing:-.07em; }
h1 em { color:var(--blue); font-style:normal; }
h2 { font-size:1.8rem; letter-spacing:-.04em; }
h3 { margin:8px 0 6px; font-size:1rem; }
.lead { max-width:660px; color:#d2daea; font-size:1.16rem; line-height:1.62; }
.muted { color:var(--muted); line-height:1.55; }
.safety { display:flex; align-items:flex-start; gap:12px; max-width:580px; margin-top:32px; padding:17px; border:1px solid #2b5970; border-radius:15px; background:#15313d88; color:#d7f5ee; }
.safety span { display:grid; flex:none; place-items:center; width:25px; height:25px; border-radius:50%; color:#10262b; background:var(--teal); font-weight:900; }
.safety p { margin:0; font-size:.92rem; line-height:1.5; }
.card { max-width:780px; padding:34px; border:1px solid var(--line); border-radius:23px; background:linear-gradient(145deg,#1d2a40e8,#152035e8); box-shadow:var(--shadow); }
.card.narrow { max-width:500px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; margin-top:25px; }
label { display:grid; gap:8px; color:#dfe6f2; font-size:.84rem; font-weight:650; }
input,textarea { width:100%; padding:12px 13px; outline:0; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:#0d1627; transition:border .15s,box-shadow .15s; }
textarea { resize:vertical; line-height:1.45; }
input:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px #68a7ff2e; }
small { color:var(--muted); font-weight:400; line-height:1.4; }
.wide { grid-column:1/-1; }
.primary,.secondary,.text-button { min-height:44px; border:0; border-radius:11px; font-weight:750; }
.primary { display:flex; align-items:center; justify-content:center; gap:13px; color:#091626; background:linear-gradient(135deg,var(--teal),#79acff); box-shadow:0 10px 25px #4d8dff35; }
.primary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.primary span { font-size:1.2rem; }
.secondary { padding:0 15px; color:#e8eef8; border:1px solid var(--line); background:#23324b; }
.secondary:hover { background:#2d405f; }
.text-button { padding:0 4px; color:var(--muted); background:transparent; }
.text-button:hover { color:var(--ink); }
.dashboard-title { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.dashboard-title h1 { margin-bottom:8px; font-size:clamp(2.35rem,5vw,4.2rem); }
.dashboard-title .muted { margin-bottom:0; }
.actions { display:flex; align-items:center; gap:14px; padding-bottom:6px; }
.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin:42px 0 30px; }
.quick-grid article { min-height:150px; padding:19px; border:1px solid var(--line); border-radius:17px; background:#18263bbb; }
.quick-grid p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.45; }
.icon { display:grid; place-items:center; width:31px; height:31px; color:#0c1930; border-radius:9px; background:var(--blue); font-weight:900; }
.media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:17px; }
.media-card { position:relative; overflow:hidden; min-height:190px; padding:16px; text-align:left; color:var(--ink); border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,#243956,#172235); }
.media-card:before { position:absolute; content:""; width:150px; height:150px; right:-45px; top:-45px; border-radius:50%; background:#65a9ff2e; }
.media-card:hover { border-color:var(--blue); transform:translateY(-3px); box-shadow:0 16px 30px #0206115e; }
.media-card .play { position:relative; display:grid; place-items:center; width:38px; height:38px; margin-bottom:38px; border-radius:50%; color:#11203a; background:var(--teal); font-size:.85rem; }
.media-card strong,.media-card small { position:relative; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-card strong { font-size:.94rem; }
.media-card small { margin-top:6px; }
.empty { padding:70px 20px; text-align:center; border:1px dashed var(--line); border-radius:20px; color:var(--muted); }
.empty span { display:block; margin-bottom:12px; color:var(--teal); font-size:2rem; }
.empty h2 { margin-bottom:5px; color:var(--ink); }
dialog { width:min(920px,94vw); padding:26px; color:var(--ink); border:1px solid var(--line); border-radius:20px; background:#121d2f; box-shadow:var(--shadow); }
dialog::backdrop { background:#02050dbb; backdrop-filter:blur(3px); }
dialog h2 { margin-right:35px; font-size:1.2rem; }
video { display:block; width:100%; max-height:72vh; border-radius:10px; background:#000; }
.close { position:absolute; top:11px; right:14px; width:33px; height:33px; color:var(--ink); border:0; border-radius:50%; background:#2c3d5a; font-size:1.5rem; }
#notice { position:fixed; z-index:2; left:50%; bottom:24px; max-width:min(520px,90vw); padding:12px 16px; transform:translate(-50%,130px); color:#ffeff1; border:1px solid #b63d50; border-radius:10px; background:#57212d; box-shadow:var(--shadow); transition:transform .22s; }
#notice.visible { transform:translate(-50%,0); }
@media (max-width:650px) { .shell { width:min(100% - 28px,1120px); } .screen { margin-top:35px; } .hero { padding-top:30px; } .card { padding:24px 18px; } .form-grid,.quick-grid { grid-template-columns:1fr; } .wide { grid-column:auto; } .dashboard-title { align-items:flex-start; flex-direction:column; } .actions { padding:0; } .media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; } }

.sharing { max-width:none; margin-top:34px; }
.sharing h2 { margin-bottom:8px; }
.share-columns { display:grid; grid-template-columns:minmax(260px,.7fr) minmax(340px,1.3fr); gap:28px; margin-top:24px; }
.form-grid.compact { margin-top:0; grid-template-columns:1fr; align-content:start; }
.share-form { display:grid; gap:14px; }
.share-form select { width:100%; padding:12px 13px; color:var(--ink); border:1px solid var(--line); border-radius:10px; background:#0d1627; }
.permission { display:flex; align-items:center; gap:9px; font-weight:500; }
.permission input { width:auto; }
.share-selection { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:9px; max-height:245px; overflow:auto; padding:4px; }
.share-selection label { display:flex; align-items:flex-start; gap:8px; padding:10px; border:1px solid var(--line); border-radius:9px; color:var(--muted); font-size:.82rem; font-weight:500; }
.share-selection input { width:auto; margin-top:2px; }
@media (max-width:760px) { .share-columns { grid-template-columns:1fr; } }