:root{
  --bg:#0a1310;
  --panel:rgba(18,30,26,.58);
  --panel-solid:#121e1a;
  --line:rgba(120,180,160,.13);
  --ink:#eef3ef;
  --muted:#7c9088;
  --teal:#3fd9b4;
  --teal-glow:#6ff0d2;
  --topaz:#5cc6e8;
  --brass:#d7a94b;
  --brass-glow:#f0c66e;
  --rose:#e8758a;
  --sage:#9fd17a;
  --root:#d7a94b;
  --folder:#3fd9b4;
  --file:#5cc6e8;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:
    radial-gradient(900px 650px at 82% -8%, #103027 0%, transparent 55%),
    radial-gradient(800px 600px at 8% 108%, #0e2433 0%, transparent 50%),
    var(--bg);
  color:var(--ink);
  font-family:"Newsreader",serif;
  min-height:100vh;
  position:relative;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(120,180,160,.08) 1px, transparent 1px);
  background-size:26px 26px;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.03;z-index:60;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mono{font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:1.5px}

/* LOGIN */
#login{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center}
.card-login{
  width:min(380px,90vw);background:var(--panel);backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:16px;padding:40px 34px 30px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);animation:rise .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.card-login h1{font-size:30px;font-weight:600;letter-spacing:-.5px;margin-bottom:3px}
.card-login .sub{font-size:11px;color:var(--muted);margin-bottom:26px;font-family:"JetBrains Mono",monospace;letter-spacing:1px}
.field{margin-bottom:14px}
.field label{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:7px;font-family:"JetBrains Mono",monospace}
.field input{width:100%;background:#08110e;border:1px solid var(--line);color:var(--ink);padding:12px 14px;border-radius:9px;font-family:"JetBrains Mono",monospace;font-size:14px;transition:.2s}
.field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(63,217,180,.13)}
.btn{width:100%;margin-top:10px;padding:13px;border-radius:9px;cursor:pointer;background:linear-gradient(180deg,var(--teal),#2bbf9b);color:#04130e;border:none;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;transition:.15s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.err{color:var(--rose);font-size:12px;margin-top:12px;min-height:16px;font-family:"JetBrains Mono",monospace}

/* APP */
#app{display:none;position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 26px 60px}
nav{display:flex;align-items:center;gap:18px;padding:22px 4px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:34px;height:34px;border-radius:50%;background:conic-gradient(from 0deg,var(--teal),var(--topaz),var(--brass),var(--teal));display:flex;align-items:center;justify-content:center;position:relative}
.mark::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal-glow);box-shadow:0 0 12px var(--teal-glow);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.brand .name{font-size:18px;font-weight:600;line-height:1}
.brand .tag{font-size:9px;color:var(--muted);font-family:"JetBrains Mono",monospace;letter-spacing:2px;margin-top:3px}
.tabs{display:flex;gap:4px;background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:11px;padding:5px}
.tab{padding:8px 16px;border-radius:7px;cursor:pointer;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border:none;background:transparent;transition:.18s}
.tab.active{background:var(--ink);color:#08110e;font-weight:700}
.spacer{flex:1}
.clock{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--teal);letter-spacing:1px}
nav .logout{background:transparent;border:1px solid var(--line);color:var(--muted);padding:7px 12px;border-radius:7px;font-family:"JetBrains Mono",monospace;font-size:10px;cursor:pointer;letter-spacing:1px}
nav .logout:hover{color:var(--ink)}

.panel{background:var(--panel);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:16px;padding:24px}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:2.5px;color:var(--teal);text-transform:uppercase;margin-bottom:6px}
h2.big{font-size:clamp(28px,4vw,46px);font-weight:500;letter-spacing:-1px;margin-bottom:22px}

.tabview{display:none;animation:fade .4s ease}
.tabview.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.block{margin-bottom:48px;animation:fade .5s ease both}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;padding:20px;border-top:2px solid}
.stat .l{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
.stat .v{font-size:38px;font-weight:600;margin-top:8px;line-height:1}
.stat .s{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--muted);margin-top:6px}

.row2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;margin-top:18px}
@media(max-width:900px){.row2{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}

.donutwrap{display:flex;align-items:center;gap:20px}
.legend{font-family:"JetBrains Mono",monospace;font-size:11px;line-height:2}
.legend .dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:8px}

.feed-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.feed-item:last-child{border:0}
.badge{font-family:"JetBrains Mono",monospace;font-size:9px;padding:3px 8px;border-radius:5px;letter-spacing:1px}
.feed-item .nm{flex:1;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-item .tm{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--muted)}

.notes-layout{display:grid;grid-template-columns:300px 1fr;gap:18px;min-height:560px}
@media(max-width:900px){.notes-layout{grid-template-columns:1fr}}
.note-list{max-height:640px;overflow:auto}
.folder-group{margin-bottom:14px}
.folder-group .fh{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:1.5px;color:var(--brass);text-transform:uppercase;margin:6px 0 6px;padding-left:2px}
.note-row{padding:9px 11px;border-radius:8px;cursor:pointer;transition:.15s;border-left:2px solid transparent}
.note-row:hover{background:rgba(120,180,160,.06)}
.note-row.sel{background:rgba(63,217,180,.08);border-left-color:var(--teal)}
.note-row .t{font-size:14px;line-height:1.3}
.note-row .p{font-family:"JetBrains Mono",monospace;font-size:9px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview{overflow:auto;max-height:640px}
.preview .empty{color:var(--muted);font-family:"JetBrains Mono",monospace;font-size:12px;text-align:center;padding-top:120px;letter-spacing:1px}
.md h1{font-size:26px;font-weight:600;margin:0 0 14px;letter-spacing:-.5px}
.md h2{font-size:20px;font-weight:600;margin:22px 0 10px;color:var(--teal-glow)}
.md h3{font-size:16px;font-weight:600;margin:18px 0 8px;color:var(--topaz)}
.md p{font-size:15px;line-height:1.7;margin:10px 0;color:#dde6e1}
.md ul,.md ol{margin:10px 0 10px 22px}
.md li{font-size:15px;line-height:1.7;margin:4px 0}
.md code{font-family:"JetBrains Mono",monospace;font-size:12px;background:#08110e;padding:2px 6px;border-radius:4px;color:var(--brass-glow)}
.md pre{background:#08110e;border:1px solid var(--line);border-radius:8px;padding:14px;overflow:auto;margin:12px 0}
.md pre code{background:none;padding:0;color:#c9d4ce}
.md table{border-collapse:collapse;margin:12px 0;width:100%}
.md th,.md td{border:1px solid var(--line);padding:7px 11px;font-size:13px;text-align:left}
.md th{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:1px;color:var(--muted)}
.md blockquote{border-left:2px solid var(--teal);padding-left:14px;color:var(--muted);margin:12px 0}
.md hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* GRAF (struktura) */
.struktura-layout{display:grid;grid-template-columns:380px 1fr;gap:18px}
@media(max-width:900px){.struktura-layout{grid-template-columns:1fr}}

.graf-wrap{position:relative;height:600px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:rgba(8,17,14,.4)}
#grafCanvas{display:block;cursor:grab}
#grafCanvas:active{cursor:grabbing}
.graf-legend{position:absolute;left:16px;bottom:16px;background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:10px;padding:12px 15px;font-family:"JetBrains Mono",monospace;font-size:11px;line-height:1.9}
.graf-legend .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle}

/* file tree */
.tree{font-family:"JetBrains Mono",monospace;font-size:13px;max-height:600px;overflow:auto}
.tree-item{padding:4px 6px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:.12s;user-select:none}
.tree-item:hover{background:rgba(120,180,160,.06)}
.tree-item .tw{display:inline-block;width:12px;color:var(--muted);font-size:10px;flex:none;text-align:center}
.tree-item .ic{flex:none}
.tree-item .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-item .sz{color:var(--muted);font-size:10px;flex:none}
.tree-children{margin-left:16px;border-left:1px solid var(--line);padding-left:4px}
.tree-children.collapsed{display:none}
.tree-item.is-file .lbl{color:#dde6e1}
.tree-item.is-folder .lbl{font-weight:500}

/* size bars */
.sizebar-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.sizebar-row:last-child{border:0}
.sizebar-row .nm{font-family:"JetBrains Mono",monospace;font-size:11px;width:120px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sizebar-track{flex:1;height:6px;background:rgba(120,180,160,.1);border-radius:3px;overflow:hidden}
.sizebar-fill{height:100%;border-radius:3px}
.sizebar-row .val{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--muted);width:64px;text-align:right;flex:none}

.loading{text-align:center;padding:60px;color:var(--muted);font-family:"JetBrains Mono",monospace;font-size:12px}