:root{--bg:#07111f;--panel:#0d1a2c;--panel2:#101f34;--line:#20334d;--text:#edf5ff;--muted:#91a4bd;--accent:#6ee7ff;--accent2:#9b8cff;--good:#67e8a5;--danger:#ff7188;--shadow:0 20px 60px rgba(0,0,0,.3)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 20% 0%,#122846 0,transparent 32%),radial-gradient(circle at 90% 20%,#211c4b 0,transparent 28%),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.wrap{width:min(1180px,92%);margin:auto}.topbar{position:sticky;top:0;z-index:20;background:rgba(7,17,31,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}.nav{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-family:'Space Grotesk'}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06101d;font-weight:900;font-size:22px;box-shadow:0 10px 30px #6ee7ff22}.brand span:last-child{font-weight:800;letter-spacing:.4px}.brand b{color:var(--accent)}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:1.8px;margin-top:2px}nav{display:flex;gap:24px;align-items:center}nav a{color:#b8c9dd;text-decoration:none;font-weight:600;font-size:14px}nav a:hover{color:#fff}.nav-login{padding:10px 16px;border:1px solid var(--line);border-radius:12px}.hero{padding:80px 0 42px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end}.eyebrow{color:var(--accent);font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase}.hero h1{font:700 clamp(42px,7vw,82px)/.95 'Space Grotesk';margin:14px 0 20px;letter-spacing:-4px}.hero h1 span{color:transparent;background:linear-gradient(90deg,#fff,var(--accent),#b29cff);background-clip:text}.hero p{color:var(--muted);max-width:670px;font-size:17px;line-height:1.7}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat{background:linear-gradient(180deg,#ffffff0a,#ffffff03);border:1px solid var(--line);border-radius:18px;padding:20px}.stat strong{font:700 30px 'Space Grotesk';display:block}.stat span{font-size:12px;color:var(--muted)}.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:20px 0 28px}.input,.select,.btn{border:1px solid var(--line);background:#0b1728;color:var(--text);border-radius:12px;padding:12px 14px;outline:none}.input:focus,.select:focus{border-color:#5ddcff}.search{flex:1;min-width:220px}.chips{display:flex;gap:8px}.chip{cursor:pointer}.chip.active{background:linear-gradient(135deg,#17354c,#25244e);border-color:#4ddcff;color:#fff}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:linear-gradient(180deg,#ffffff08,#ffffff03);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transition:.25s}.card:hover{transform:translateY(-4px);border-color:#345273}.thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#142a42,#17152f);position:relative;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.thumb .placeholder{height:100%;display:grid;place-items:center;font:700 34px 'Space Grotesk';color:#ffffff22}.badge{position:absolute;left:12px;top:12px;padding:7px 10px;border-radius:999px;background:#07111fcc;border:1px solid #ffffff18;font-size:11px;font-weight:800}.card-body{padding:17px}.card h3{margin:5px 0 8px;font:700 20px 'Space Grotesk'}.card p{color:var(--muted);font-size:13px;line-height:1.55;min-height:40px}.meta{font-size:11px;color:#7690ad}.tags{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.tag{font-size:10px;color:#a9c2dc;border:1px solid var(--line);padding:5px 7px;border-radius:7px}.actions{display:flex;gap:8px;margin-top:14px}.btn{cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:700;font-size:12px}.btn-primary{background:linear-gradient(135deg,#67e8ff,#9b8cff);color:#07111f;border:0}.btn-ghost{background:#ffffff05}.btn-danger{color:#ff9aaa}.btn:disabled{opacity:.5;cursor:not-allowed}.empty{grid-column:1/-1;text-align:center;border:1px dashed var(--line);padding:50px;border-radius:18px;color:var(--muted)}.flash{margin:20px 0;padding:13px 16px;border-radius:12px;background:#15352a;border:1px solid #285c47}.flash.error{background:#351b26;border-color:#693044}.detail{padding:46px 0}.detail-head{display:grid;grid-template-columns:1fr .9fr;gap:32px}.detail h1{font:700 52px/1 'Space Grotesk';letter-spacing:-2px}.detail-cover{border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#101d2d}.detail-cover img{width:100%;display:block}.stats-actions{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0}.counter{min-width:95px}.comments{margin-top:35px}.comment{border-bottom:1px solid var(--line);padding:14px 0}.comment strong{font-size:13px}.comment p{margin:6px 0;color:#c0cede;font-size:13px}.form{background:#ffffff05;border:1px solid var(--line);border-radius:18px;padding:20px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:12px;color:#9bb0c8;font-weight:700}.textarea{min-height:130px;resize:vertical}.admin{padding:34px 0}.admin-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.admin-head h1{font:700 38px 'Space Grotesk';margin:0}.side-layout{display:grid;grid-template-columns:220px 1fr;gap:20px}.sidebar{border:1px solid var(--line);border-radius:18px;padding:12px;height:max-content;position:sticky;top:95px}.sidebar a{display:block;padding:12px 14px;color:#aebfd2;text-decoration:none;border-radius:10px;font-weight:700;font-size:13px}.sidebar a:hover,.sidebar a.active{background:#ffffff09;color:#fff}.panel{background:#ffffff04;border:1px solid var(--line);border-radius:18px;padding:18px;overflow:auto}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:12px;vertical-align:top}.table th{color:#7892ae;text-transform:uppercase;font-size:10px;letter-spacing:1px}.toolbar{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}.login-wrap{min-height:calc(100vh - 76px);display:grid;place-items:center;padding:40px}.login-box{width:min(460px,100%);background:#ffffff06;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow)}.login-box h1{font:700 32px 'Space Grotesk';margin:0 0 8px}.login-box p{color:var(--muted);font-size:13px}.login-box .field{margin:15px 0}.notice{padding:13px;border-radius:12px;background:#0d2530;border:1px solid #21485b;color:#b9e9f8;font-size:12px}.cards-print{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.login-card{border:1px solid #b9c7d8;border-radius:18px;padding:22px;background:#fff;color:#0d1725}.login-card .code{font:700 25px 'Space Grotesk';letter-spacing:2px}.login-card small{color:#63758c}.login-card .credentials{margin-top:16px;border-top:1px dashed #aeb9c8;padding-top:12px}.login-card .cred{font:700 18px monospace}.profile-mini{display:flex;align-items:center;gap:10px}.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#18314b}.pagination{display:flex;gap:8px;margin-top:20px}.page{padding:8px 12px;border:1px solid var(--line);border-radius:8px;color:#abc;text-decoration:none}.page.active{background:#fff;color:#07111f}.modal{position:fixed;inset:0;background:#0009;display:none;place-items:center;z-index:50;padding:20px}.modal.show{display:grid}.modal-box{width:min(700px,100%);background:#0d1a2c;border:1px solid var(--line);border-radius:20px;padding:22px;max-height:90vh;overflow:auto}.close{float:right;background:none;border:0;color:#fff;font-size:24px;cursor:pointer}footer{margin-top:80px;border-top:1px solid var(--line);padding:30px 0;color:#71859e;font-size:11px}.footer-inner{display:flex;justify-content:space-between;gap:20px}.footer-inner strong{color:#b9cce1}@media(max-width:850px){.hero,.detail-head,.side-layout{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.sidebar{position:static}.cards-print{grid-template-columns:1fr}}@media(max-width:560px){.nav nav a:not(.nav-login){display:none}.hero h1{font-size:48px}.grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.footer-inner{flex-direction:column}.detail h1{font-size:38px}}@media print{.topbar,.filters,.sidebar,.toolbar,.no-print,footer,.noise{display:none!important}body{background:#fff;color:#111}.wrap{width:100%}.panel,.login-card{box-shadow:none;border:1px solid #aaa}.cards-print{grid-template-columns:1fr 1fr}.login-card{break-inside:avoid}}

/* Live website preview */
.thumb-preview{width:150%;height:150%;border:0;transform:scale(.6667);transform-origin:top left;background:#fff;pointer-events:none}
.preview-hitarea{position:absolute;inset:0;z-index:2}
.thumb .badge{z-index:3}
.detail-preview-panel{min-width:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#0b1728;box-shadow:var(--shadow)}
.preview-toolbar{min-height:68px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);background:#101f34}
.preview-toolbar>div{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.preview-toolbar strong{font-size:11px;letter-spacing:1px}.preview-toolbar small{display:block;width:100%;padding-left:18px;color:var(--muted);font-size:11px;margin-top:-5px}
.live-dot{width:9px;height:9px;border-radius:50%;background:#67e8a5;box-shadow:0 0 12px #67e8a5}
.live-frame-wrap{height:680px;background:#fff;overflow:hidden}.live-frame{width:100%;height:100%;border:0;background:#fff}
.preview-help{margin:0;padding:12px 16px;color:var(--muted);font-size:12px;line-height:1.6;background:#0d1a2c}
.screenshot-fallback{padding:12px 16px;border-top:1px solid var(--line);color:#b9cce1;font-size:12px}.screenshot-fallback summary{cursor:pointer;font-weight:700}.screenshot-fallback img{display:block;width:100%;height:auto;margin-top:12px;border-radius:10px}
.live-frame-empty{height:300px;display:grid;place-items:center;color:var(--muted)}
.thumb .placeholder small{display:block;font:500 10px Inter;color:#ffffff66;margin-top:8px}
@media(max-width:850px){.live-frame-wrap{height:560px}}@media(max-width:560px){.live-frame-wrap{height:480px}.preview-toolbar{align-items:flex-start;flex-direction:column}}

/* Student screenshot upload and showcase preview */
.screenshot-preview{margin-top:12px;min-height:90px;border:1px dashed var(--line,#475569);border-radius:14px;padding:12px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);background:rgba(148,163,184,.05);flex-wrap:wrap}.screenshot-preview img{display:block;max-width:100%;max-height:320px;object-fit:contain;border-radius:9px}.thumb-screenshot{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}.detail-screenshot{width:100%;height:auto;max-height:78vh;object-fit:contain;object-position:top center;display:block;background:#fff}.screenshot-view{height:auto;min-height:220px;background:#fff}