:root{
  --teal-900:#356267;
  --teal-700:#41737c;
  --mint:#c2f2f2;
  --ice:#effefb;
  --bg:#06171b;
  --bg-2:#082026;
  --panel:#0b2228;
  --panel-2:#0e2a31;
  --line:rgba(194,242,242,.10);
  --line-strong:rgba(194,242,242,.18);
  --text:#effefb;
  --muted:#9bb5b9;
  --aqua:#48d8df;
  --aqua-2:#9ef1f3;
  --warning:#f7b23b;
  --danger:#ff6b6b;
  --success:#47d58a;
  --shadow:0 18px 50px rgba(0,0,0,.25);
  --radius:14px;
  --radius-sm:10px;
  --sidebar:226px;
  --topbar:58px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
radial-gradient(900px 420px at 68% 8%,rgba(50,204,210,.09),transparent 60%),
linear-gradient(180deg,#051519,#071b20 44%,#06171b);
color:var(--text);font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit}
.app-shell{min-height:100vh}
.icon{width:18px;height:18px;display:inline-block;flex:none}
.topbar{height:var(--topbar);position:sticky;top:0;z-index:30;display:grid;grid-template-columns:226px minmax(320px,1fr) auto;align-items:center;border-bottom:1px solid var(--line);background:rgba(5,21,25,.92);backdrop-filter:blur(18px)}
.brand{height:100%;display:flex;align-items:center;gap:10px;padding:0 20px;border-right:1px solid var(--line);font-size:17px;letter-spacing:.02em}
.brand-symbol{position:relative;width:26px;height:26px;display:inline-block}
.brand-symbol span{position:absolute;left:3px;width:20px;height:8px;border:3px solid #55dce1;transform:rotate(30deg) skewX(-30deg);border-radius:2px}
.brand-symbol span:nth-child(1){top:0}
.brand-symbol span:nth-child(2){top:8px}
.brand-symbol span:nth-child(3){top:16px}
.brand-symbol.mini{transform:scale(.62);transform-origin:left center;width:18px}
.top-search{position:relative;max-width:640px;justify-self:center;width:78%;height:38px;border:1px solid var(--line-strong);border-radius:10px;background:#0b2025;display:flex;align-items:center;gap:10px;padding:0 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.top-search input{flex:1;background:none;border:0;outline:0;color:var(--text)}
.top-search input::placeholder{color:#8ea9ae}
.top-search kbd{border:1px solid var(--line-strong);background:#102a31;color:#88a8ad;border-radius:5px;padding:2px 7px;font-size:11px}
.search-suggestions{position:absolute;left:0;right:0;top:44px;background:#0d252b;border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.search-suggestions a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.search-suggestions a:hover{background:#13363e}
.top-actions{display:flex;align-items:center;gap:8px;padding:0 18px}
.top-action{display:flex;align-items:center;gap:7px;padding:10px 13px;border-right:1px solid var(--line);color:#d7ecec}
.circle-action{position:relative;border:1px solid var(--line);background:#0d252b;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:.2s}
.circle-action:hover{transform:translateY(-1px);background:#12343b;color:var(--aqua)}
.count-badge{position:absolute;right:-4px;top:-5px;background:#3bd5dd;color:#032229;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;font-size:10px}
.user-menu{display:flex;align-items:center;gap:8px;padding-left:8px}
.user-menu span:last-child{display:flex;flex-direction:column;line-height:1.15}
.user-menu small{font-size:10px;color:var(--muted);margin-top:3px}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#41737c,#c2f2f2);color:#082126;display:grid;place-items:center;font-weight:800;border:2px solid rgba(194,242,242,.25)}
.sidebar{position:fixed;left:0;top:var(--topbar);bottom:0;width:var(--sidebar);border-right:1px solid var(--line);background:linear-gradient(180deg,#071a1f,#081c22);padding:14px 12px;overflow:auto;z-index:20}
.side-nav{display:flex;flex-direction:column;gap:3px}
.side-nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:#b9ced1;transition:.16s}
.side-nav a:hover,.side-nav a.active{background:linear-gradient(90deg,rgba(65,115,124,.46),rgba(65,115,124,.18));color:var(--aqua-2)}
.side-nav a.active{box-shadow:inset 2px 0 0 var(--aqua)}
.side-nav.compact a{padding:7px 10px;font-size:12px}
.side-nav .icon{width:16px;height:16px}
.side-separator{height:1px;background:var(--line);margin:13px 0}
.side-label{font-size:11px;color:#77959a;margin:0 8px 8px}
.side-admin-card{margin-top:34px;border:1px solid rgba(61,213,221,.26);background:linear-gradient(180deg,rgba(13,49,58,.88),rgba(8,31,38,.88));border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:7px}
.side-admin-card strong{color:#7de9ed}
.side-admin-card span{color:#a7c1c5;font-size:12px}
.side-admin-icon{width:30px;height:30px;color:#70e4e9}
.page{margin-left:var(--sidebar);padding:24px 34px 0;min-height:calc(100vh - var(--topbar))}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(400px,.9fr);gap:20px;min-height:245px;align-items:center}
.hero-copy h1{font-size:34px;line-height:1.05;margin:0 0 10px;letter-spacing:-.03em}
.hero-copy h1 span{color:#43d6dd}
.hero-copy p{color:#c7dadd;margin:0 0 22px;font-size:15px}
.hero-search{display:grid;grid-template-columns:1fr 140px;max-width:560px;background:#0d252b;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;height:45px}
.hero-search input{background:transparent;border:0;outline:0;color:#dff4f4;padding:0 15px}
.hero-search select{background:#0d252b;border:0;border-left:1px solid var(--line);color:#c6dcde;padding:0 10px}
.hero-search button{border-radius:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px;align-items:center}
.chips small{color:#9db4b8}
.chip{background:#112c33;border:1px solid var(--line);border-radius:999px;padding:6px 11px;color:#cce0e2;font-size:12px}
.chip:hover{border-color:rgba(72,216,223,.35);color:var(--aqua)}
.hero-art{position:relative;height:245px;overflow:hidden}
.hero-orbit{position:absolute;left:20%;right:7%;top:8%;bottom:0;border:1px solid rgba(72,216,223,.16);border-radius:50%;transform:rotate(-7deg)}
.hero-ring{position:absolute;left:27%;top:155px;width:260px;height:58px;border-radius:50%;background:radial-gradient(ellipse,#45dfe8 0,rgba(72,216,223,.35) 28%,rgba(72,216,223,.08) 53%,transparent 70%);filter:blur(.2px)}
.folder-art{position:absolute;left:35%;top:33px;width:220px;height:150px;border-radius:28px 28px 34px 34px;background:linear-gradient(145deg,#64e5e8,#278d96 68%,#1a5f66);box-shadow:0 18px 50px rgba(38,210,220,.25),inset 0 2px 1px rgba(255,255,255,.35);transform:rotate(1deg)}
.folder-art:before{content:"";position:absolute;left:18px;top:-18px;width:95px;height:40px;border-radius:18px 18px 0 0;background:linear-gradient(145deg,#5adddf,#2b9aa3)}
.folder-art:after{content:"";position:absolute;inset:27px 20px 18px;border-radius:20px;background:linear-gradient(160deg,rgba(220,255,255,.52),rgba(90,214,219,.18));border:1px solid rgba(255,255,255,.34)}
.cloud-icon{position:absolute;left:106px;top:78px;z-index:3;width:64px;height:44px;border-radius:22px;background:#bdf4f5;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.cloud-icon:before,.cloud-icon:after{content:"";position:absolute;background:#bdf4f5;border-radius:50%}
.cloud-icon:before{width:30px;height:30px;left:8px;top:-10px}
.cloud-icon:after{width:34px;height:34px;right:7px;top:-14px}
.cloud-icon span{position:absolute;z-index:2;left:27px;top:10px;width:11px;height:22px;background:#2d8d95;border-radius:4px}
.cloud-icon span:before{content:"";position:absolute;left:-6px;top:-4px;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:11px solid #2d8d95;transform:translateX(-6px)}
.float-orb{position:absolute;width:52px;height:52px;border-radius:50%;background:#0e3037;border:1px solid rgba(72,216,223,.25);display:grid;place-items:center;color:#70e6eb;box-shadow:0 14px 30px rgba(0,0,0,.22);animation:float 3.4s ease-in-out infinite}
.float-orb.o1{left:21%;top:50px}.float-orb.o2{left:15%;top:145px;animation-delay:-1s}.float-orb.o3{right:5%;top:125px;animation-delay:-2s}
@keyframes float{50%{transform:translateY(-7px)}}
.verified-card{position:absolute;right:0;top:65px;width:220px;border:1px solid var(--line-strong);border-radius:12px;background:rgba(12,38,45,.92);padding:13px 14px 13px 48px;box-shadow:var(--shadow)}
.verified-card .icon{position:absolute;left:14px;top:18px;color:#4bddb7;width:25px;height:25px}
.verified-card strong{display:block}.verified-card small{display:block;color:#99b5b8;margin-top:6px}
.feature-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:6px 0 12px}
.feature-card{min-height:88px;border:1px solid var(--line);background:linear-gradient(180deg,#0d272e,#0a2127);border-radius:12px;padding:15px;display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;transition:.18s}
.feature-card:hover{transform:translateY(-2px);border-color:rgba(72,216,223,.25)}
.feature-icon{width:44px;height:44px;border-radius:10px;background:rgba(55,116,124,.22);display:grid;place-items:center;color:#73e7eb}
.feature-icon .icon{width:27px;height:27px}
.feature-card strong{display:block;font-size:13px}
.feature-card small{display:block;color:#92adb1;font-size:11px;margin-top:5px}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:12px;align-items:start}
.panel{border:1px solid var(--line);background:linear-gradient(180deg,rgba(13,37,43,.94),rgba(8,28,34,.95));border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.08)}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:14px 15px 8px}
.panel-head h2{font-size:16px;margin:0;font-weight:650}
.panel-head .link{color:#a8c0c3;font-size:12px}
.tabs{display:flex;gap:22px;padding:0 15px;border-bottom:1px solid var(--line)}
.tab{padding:8px 0;color:#9bb3b6;border-bottom:2px solid transparent;font-size:12px}
.tab.active,.tab:hover{color:#58dce2;border-color:#58dce2}
.file-table{width:100%;border-collapse:collapse}
.file-table th{padding:9px 14px;color:#8aa3a7;font-size:10px;font-weight:500;text-align:left;border-bottom:1px solid var(--line)}
.file-table td{padding:9px 14px;border-bottom:1px solid rgba(194,242,242,.07);vertical-align:middle}
.file-row:hover{background:rgba(65,115,124,.08)}
.file-cell{display:flex;align-items:center;gap:12px}
.file-icon{width:36px;height:36px;border-radius:9px;background:#102f36;display:grid;place-items:center;color:#65dfe4;border:1px solid var(--line)}
.file-icon .icon{width:22px;height:22px}
.file-meta strong{display:block;font-size:13px;font-weight:560}
.file-meta small{color:#8ba7aa;font-size:10px}
.verify-dot{color:#4adce1;font-weight:800}
.category-badge{display:inline-flex;border:1px solid rgba(72,216,223,.28);background:rgba(19,72,81,.25);color:#66e0e5;border-radius:6px;padding:4px 7px;font-size:10px}
.rating{color:#f5b634;white-space:nowrap}
.mini-download{width:30px;height:30px;border:0;border-radius:50%;background:#55dce1;color:#062229;display:grid;place-items:center;cursor:pointer;transition:.18s}
.mini-download:hover{transform:scale(1.08);box-shadow:0 0 0 5px rgba(72,216,223,.09)}
.more-btn{width:30px;height:30px;border:0;background:transparent;color:#96afb2;cursor:pointer}
.upload-drop{margin:10px;border:1px dashed rgba(72,216,223,.35);border-radius:10px;padding:14px;display:flex;align-items:center;gap:14px;background:rgba(40,113,122,.08)}
.upload-drop .upload-icon{width:52px;height:52px;border-radius:10px;background:#11373e;display:grid;place-items:center;color:#69e3e7}
.upload-drop .upload-icon .icon{width:27px;height:27px}
.upload-drop strong{display:block}.upload-drop span{color:#94afb3;font-size:12px}
.upload-drop .btn{margin-left:auto}
.side-stack{display:flex;flex-direction:column;gap:12px}
.stats-card{padding:10px 12px 13px}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat-box{background:#102c33;border:1px solid var(--line);border-radius:9px;padding:9px;min-height:62px;display:flex;align-items:center;gap:7px}
.stat-box .icon{color:#55dce1}
.stat-box strong{display:block;font-size:14px;line-height:1}.stat-box small{display:block;color:#84a2a6;font-size:9px;margin-top:4px}
.category-list{padding:0 14px 12px}
.category-list a{display:flex;align-items:center;gap:8px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:12px}
.category-list a:last-child{border-bottom:0}
.category-list .icon{width:14px;height:14px;color:#72dce1}
.category-list b{margin-left:auto;color:#9db6b9;font-weight:500}
.report-card{padding:16px}
.report-title{display:flex;align-items:center;gap:11px}
.report-alert{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(247,178,59,.14);color:#f9b83f}
.report-card p{color:#9cb6b9;font-size:12px;margin:8px 0 14px}
.btn{border:1px solid var(--line-strong);border-radius:8px;padding:9px 14px;background:#102b32;color:#d9efef;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;transition:.16s}
.btn:hover{transform:translateY(-1px);border-color:rgba(72,216,223,.35)}
.btn.primary{background:linear-gradient(180deg,#51dfe5,#33bdc5);color:#052126;border-color:#65e2e6;font-weight:700}
.btn.ghost{background:transparent}.btn.small{padding:7px 10px;font-size:12px}
.footer{margin-left:var(--sidebar);height:72px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 22px;color:#8fa8ac;font-size:11px}
.footer-brand{display:flex;align-items:center;gap:8px}.footer-brand strong{color:#c9e6e6}.footer nav{display:flex;gap:26px}.footer nav a:hover{color:#5ddce1}.footer .back-top{justify-self:end;background:#0d3037;color:#63dfe4}
.notice{padding:11px 12px;border-radius:9px;border:1px solid var(--line);margin:10px 0}.notice.success{background:rgba(71,213,138,.08);border-color:rgba(71,213,138,.25)}.notice.danger{background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.25)}
.auth-page{display:grid;place-items:center;min-height:100vh}.auth-shell{width:min(480px,92vw)}.auth-brand{text-align:center;font-size:22px;font-weight:800;margin-bottom:18px}.brand-mark{color:#5cdde2}.auth-card{border:1px solid var(--line-strong);background:#0b242a;border-radius:16px;padding:24px;box-shadow:var(--shadow)}.auth-card h1{margin:4px 0 8px}.eyebrow{font-size:10px;letter-spacing:.18em;color:#60dce2}.muted{color:#8faeb2}.stack{display:flex;flex-direction:column;gap:13px}.stack label{display:flex;flex-direction:column;gap:6px;color:#a9c0c4;font-size:12px}.stack input,.stack textarea,.stack select,.form-control{width:100%;border:1px solid var(--line-strong);background:#0e2b32;color:#eafafa;border-radius:9px;padding:10px 11px;outline:none}.stack input:focus,.stack textarea:focus,.stack select:focus,.form-control:focus{border-color:#4edce2;box-shadow:0 0 0 3px rgba(78,220,226,.08)}
.content-card{border:1px solid var(--line);background:#0c242a;border-radius:12px;padding:18px}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:12px}.content-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.content-title h1{margin:0;font-size:24px}.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}.meta-pill{border:1px solid var(--line);background:#102c33;border-radius:999px;padding:5px 9px;color:#a8c0c3;font-size:11px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:grid;place-items:center;padding:20px;z-index:100}.modal[hidden]{display:none}.modal-card{width:min(520px,96vw);background:#0c252b;border:1px solid var(--line-strong);border-radius:14px;padding:18px;box-shadow:var(--shadow)}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head button{border:0;background:none;color:#9bb5b9;font-size:22px;cursor:pointer}
.control-page{margin-left:var(--sidebar);padding:24px 30px}.control-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.control-table{width:100%;border-collapse:collapse}.control-table th,.control-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:12px}.control-table th{color:#8da9ad}.status-open{color:#f7b23b}.status-ok{color:#47d58a}.status-bad{color:#ff7777}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.kpi{padding:16px}.kpi strong{display:block;font-size:28px}.kpi span{color:#90aaae}
@media(max-width:1180px){
  .topbar{grid-template-columns:205px 1fr auto}.sidebar{width:205px}.page,.footer,.control-page{margin-left:205px}.hero{grid-template-columns:1fr 420px}.feature-row{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1fr 320px}.file-table th:nth-child(6),.file-table td:nth-child(6){display:none}
}
@media(max-width:900px){
  :root{--sidebar:0px}.topbar{grid-template-columns:auto 1fr auto;padding-left:0}.brand{border-right:0;padding:0 12px}.brand strong{display:none}.top-search{width:96%}.top-actions .top-action span,.user-menu span:last-child{display:none}.sidebar{display:none}.page,.footer,.control-page{margin-left:0}.page{padding:18px}.hero{grid-template-columns:1fr}.hero-art{display:none}.feature-row{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.side-stack{display:grid;grid-template-columns:1fr 1fr}.file-table th:nth-child(3),.file-table td:nth-child(3),.file-table th:nth-child(5),.file-table td:nth-child(5){display:none}.footer{height:auto;grid-template-columns:1fr;padding:20px;gap:16px}.footer nav{flex-wrap:wrap;gap:14px}.footer .back-top{position:fixed;right:12px;bottom:12px}
}
@media(max-width:560px){
  .topbar{grid-template-columns:auto 1fr auto}.top-search{max-width:none}.top-actions{padding:0 7px}.top-actions .circle-action:nth-of-type(1){display:none}.hero-copy h1{font-size:29px}.hero-search{grid-template-columns:1fr 110px}.feature-row{grid-template-columns:1fr}.side-stack{display:flex}.file-table th:nth-child(2),.file-table td:nth-child(2),.file-table th:nth-child(4),.file-table td:nth-child(4){display:none}.page{padding:14px}.panel{overflow:hidden}.upload-drop{flex-wrap:wrap}.upload-drop .btn{margin-left:66px}.stat-grid{grid-template-columns:repeat(2,1fr)}
}