@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=PT+Serif:ital,wght@0,400;0,700;1,700&display=swap');

:root{ --bg:#383838; --green:#2ecc40; --green-btn:#5cdd77; --green-btn-h:#48c463; --cyan:#16e0e0; --cyan-h:#0fbdbd; }
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ font-family:'Inter',sans-serif; background:var(--bg); color:#fff; min-height:100vh; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; }
a{ text-decoration:none; }
.hidden{ display:none !important; }
.center{ text-align:center; }
.muted{ color:#b3b3b3; }
.small{ font-size:12px; }
.bold{ font-weight:700; }
.green{ color:var(--green); }
.green:hover{ text-decoration:underline; }
.bold.green:hover{ text-decoration:underline; }
.serif{ font-family:'PT Serif',Georgia,serif; }
.error{ color:#ff6b6b; text-align:center; margin:8px 0; }
.success{ color:var(--green-btn); text-align:center; margin:8px 0; }
::selection{ background:var(--green); color:#000; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#2a2a2a; }
::-webkit-scrollbar-thumb{ background:#555; border-radius:5px; }

/* Logo */
.tu-logo{ display:inline-flex; flex-direction:column; line-height:.8; font-style:italic; font-weight:800; }
.tu-logo-row{ display:flex; align-items:flex-start; }
.tu-logo-text{ font-size:var(--fs); letter-spacing:-1px; color:var(--green); }
.tu-logo-badge{ display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:50%; width:calc(var(--bs)*0.9); height:calc(var(--bs)*0.9); margin-left:2px; margin-top:-4px; }
.tu-logo-badge svg{ width:60%; height:60%; fill:none; stroke:var(--green); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.tu-logo:hover{ transform:scale(1.03); }

/* Navbar */
.navbar{ position:sticky; top:0; z-index:50; background:#000; border-bottom:1px solid #262626; }
.nav-inner{ max-width:1200px; margin:0 auto; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.nav-links{ display:flex; align-items:center; gap:24px; }
.nav-a{ color:#d4d4d4; font-style:italic; font-weight:600; font-size:18px; }
.nav-a.green{ color:var(--green); }
.nav-a:hover{ color:#fff; }
.nav-a.green:hover{ color:var(--green-btn); }

/* Footer */
.footer{ background:#000; border-top:1px solid #262626; margin-top:auto; }
.footer-inner{ max-width:1200px; margin:0 auto; padding:24px; }
.footer-inner .muted{ font-size:14px; }
.footer-inner .green{ font-size:14px; }
.copy{ text-align:center; color:#d4d4d4; font-size:14px; margin-top:16px; }

/* Buttons */
.btn-white{ background:#fff; color:#000; border:none; padding:12px 32px; border-radius:6px; font-size:18px; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.btn-white:hover{ transform:scale(1.02); }
.btn-green{ background:var(--green-btn); color:#000; border:none; padding:10px 32px; border-radius:6px; font-size:18px; font-weight:600; cursor:pointer; }
.btn-green:hover{ background:var(--green-btn-h); }
.btn-green:active{ transform:scale(.96); }
.btn-cyan{ background:var(--cyan); color:#000; border:none; padding:8px 32px; border-radius:6px; font-size:18px; font-weight:500; cursor:pointer; }
.btn-cyan:hover{ background:var(--cyan-h); }
.btn-cyan.small{ font-size:12px; padding:6px 10px; font-weight:600; flex:1; }
.btn-del{ background:rgba(239,68,68,.9); color:#fff; border:none; padding:6px 10px; border-radius:4px; cursor:pointer; }
.btn-del:hover{ background:#dc2626; }
.link-btn{ background:none; border:none; color:#a3a3a3; cursor:pointer; margin-top:16px; font-size:14px; }
.link-btn:hover{ color:#fff; }

/* Home */
.home-main{ max-width:768px; width:100%; margin:0 auto; padding:40px 24px; flex:1; }
.upload-box{ border:2px dashed #737373; border-radius:6px; padding:32px; }
.title{ text-align:center; font-size:30px; font-weight:700; margin:0; }
.dropzone{ margin-top:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 0; cursor:pointer; border-radius:6px; transition:background .2s; }
.dropzone.drag{ background:rgba(255,255,255,.08); }
.preview{ max-height:224px; border-radius:6px; object-fit:contain; box-shadow:0 10px 30px rgba(0,0,0,.4); }
#fileName{ margin-top:12px; }
.upload-box .center{ margin-top:20px; }
.result .check{ width:44px; height:44px; margin:0 auto 8px; border-radius:50%; background:var(--green-btn); color:#000; font-size:26px; display:flex; align-items:center; justify-content:center; }
.share-row{ margin:16px auto 0; max-width:440px; display:flex; align-items:center; gap:8px; background:#171717; padding:8px; border-radius:6px; }
.share-input{ flex:1; background:transparent; border:none; color:var(--green); font-size:14px; outline:none; }
.description{ margin-top:32px; text-align:center; font-size:17px; line-height:1.7; color:#e5e5e5; }
.description p{ margin:0 0 20px; }

/* Auth */
.auth-page{ flex:1; display:flex; flex-direction:column; align-items:center; padding:64px 24px 40px; }
.auth-form{ width:100%; max-width:440px; margin-top:48px; }
.auth-title{ text-align:center; font-size:24px; font-weight:400; color:#f5f5f5; }
.field{ display:flex; align-items:center; justify-content:flex-end; gap:16px; margin-top:20px; }
.field label{ font-size:18px; color:#f5f5f5; }
.field input{ width:256px; background:#fff; color:#000; border:none; border-radius:6px; padding:9px 12px; font-size:15px; outline:none; }
.field input:focus{ box-shadow:0 0 0 2px var(--cyan); }
.auth-form .center{ margin-top:32px; }
.auth-links{ text-align:center; font-size:14px; color:#e5e5e5; margin:6px 0 0; }
.auth-page .copy{ margin-top:auto; padding-top:64px; }

/* View page */
.view-page{ flex:1; width:100%; max-width:900px; margin:0 auto; display:flex; flex-direction:column; align-items:center; padding:32px 24px; }
.view-top{ width:100%; }
.view-body{ margin-top:32px; display:flex; flex-direction:column; align-items:center; flex:1; width:100%; }
.view-img{ max-height:70vh; border-radius:8px; object-fit:contain; box-shadow:0 20px 50px rgba(0,0,0,.5); }
.view-meta{ margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.view-meta .btn-green{ margin-top:12px; display:inline-block; }
.notfound{ margin-top:80px; }
.notfound-icon{ font-size:48px; color:#737373; }
.notfound h1{ margin:16px 0 4px; }
.view-page .copy{ margin-top:auto; padding-top:40px; }

/* Dashboard */
.dash-main{ max-width:1200px; width:100%; margin:0 auto; padding:32px 24px; flex:1; }
.dash-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; }
.dash-title{ font-size:24px; font-weight:700; margin:0; }
.stats{ margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.stat-card{ display:flex; align-items:center; gap:16px; border:1px solid #404040; background:rgba(23,23,23,.6); border-radius:8px; padding:20px; }
.stat-ico{ width:48px; height:48px; border-radius:8px; background:rgba(46,204,64,.15); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:22px; }
.stat-num{ font-size:24px; font-weight:700; }
.dash-dropzone{ margin-top:24px; border:2px dashed #525252; border-radius:8px; padding:32px; text-align:center; cursor:pointer; transition:.2s; }
.dash-dropzone.drag{ border-color:var(--green); background:rgba(46,204,64,.05); }
.dz-ico{ font-size:28px; color:#a3a3a3; }
.dash-sub{ margin-top:32px; font-size:18px; }
.grid{ margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.empty{ grid-column:1/-1; border:1px solid #404040; background:rgba(23,23,23,.4); border-radius:8px; padding:64px 0; text-align:center; color:#a3a3a3; }
.card{ overflow:hidden; border:1px solid #404040; background:rgba(23,23,23,.6); border-radius:8px; transition:transform .2s; }
.card:hover{ transform:translateY(-4px); }
.card-img{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#262626; }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.card:hover .card-img img{ transform:scale(1.05); }
.card-ext{ position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); color:#fff; padding:6px 8px; border-radius:6px; opacity:0; transition:.2s; }
.card:hover .card-ext{ opacity:1; }
.card-body{ padding:12px; }
.card-name{ margin:0; font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-actions{ margin-top:12px; display:flex; gap:8px; }

/* Toast */
#toast{ position:fixed; bottom:24px; right:24px; background:#fff; color:#111; border-radius:8px; padding:12px 16px; box-shadow:0 10px 30px rgba(0,0,0,.3); opacity:0; transform:translateY(10px); transition:.25s; z-index:100; }
#toast.show{ opacity:1; transform:translateY(0); }
#toast .t-title{ font-weight:700; font-size:14px; }
#toast .t-desc{ font-size:12px; color:#555; }

@media(max-width:768px){ .stats{ grid-template-columns:1fr; } .grid{ grid-template-columns:repeat(2,1fr); } .field{ justify-content:space-between; } .field input{ width:60%; } }