:root{
   --bg:#0b1220;
   --panel:#0f172a;
   --card:#0b1626;
   --border:#1c2a3b;
   --fg:#e7eef7;
   --muted:#9fb2c8;
   --acc:#1be4b6;
   --danger:#ef4444;
   --shadow:0 10px 30px rgba(0,0,0,.35);
   --radius:12px;
   --radius-lg:16px;
   --gap:10px;
   --trans:160ms cubic-bezier(.2,.6,.2,1)
}

@media (prefers-color-scheme:light){
    :root{
        --bg:#f7f8fb;
        --panel:#fff;
        --card:#fbfcfe;
        --border:#e6e9ef;
        --fg:#0b1220;
        --muted:#4b5563;
        --acc:#0bbd95;
        --shadow:0 10px 30px rgba(16,24,40,.08)
        }}

*{
    box-sizing:border-box
}

html,body{
    margin:0;
    padding:0;
    background:var(--bg);
    color:var(--fg);
    font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial
}

a{
    color:inherit;
    text-decoration:none
}

img{
    max-width:100%;
    display:block
}

.wrap{
    display:flex;
    flex-direction:column;
    min-height:100vh
}

header{
    position:sticky;
    top:0;
    z-index:10;
    background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 85%,transparent),color-mix(in srgb,var(--bg) 65%,transparent));
    backdrop-filter:saturate(1.2) blur(8px);
    border-bottom:1px solid var(--border)
}

.bar{
    display:flex;
    align-items:center;
    gap:var(--gap);
    padding:10px clamp(12px,3vw,18px)
}

.title{
    font-weight:800
}

.spacer{
    flex:1
}

.stats{
    font-size:12.5px;
    color:var(--muted)
}

.btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--panel);
    cursor:pointer;
    transition:transform var(--trans),box-shadow var(--trans)
}

.btn:hover{
    transform:translateY(-1px);
    box-shadow:var(--shadow)
}

.btn.primary{
    background:var(--acc);
    color:#07211b;
    border-color:transparent
}

.crumbs{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center
}

.crumbs a{
    padding:6px 10px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--card)
}

.crumbs .sep{
    color:var(--muted)
}

main{
    padding:14px clamp(12px,3vw,18px)
}

.toolbar{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    margin:10px 0
}

.input{
    background:var(--card);
    border:1px solid var(--border);
    color:var(--fg);
    border-radius:var(--radius);
    padding:10px 12px;
    min-width:220px
}

  .grid{display:grid;grid-template-columns:1fr;gap:10px}@media(min-width:680px){.grid{grid-template-columns:1fr 1fr}}@media(min-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:1280px){.grid{grid-template-columns:repeat(4,1fr)}}
  .item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--panel);transition:transform var(--trans),box-shadow var(--trans)}
  .item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.ico{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:var(--card)}
  .name{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.right{margin-left:auto;display:flex;gap:8px}.badge{border:1px solid var(--border);background:var(--card);padding:3px 10px;border-radius:999px;font-size:12px}
  footer{margin-top:auto;padding:16px clamp(12px,3vw,18px);border-top:1px solid var(--border);color:var(--muted);font-size:12.5px}
  
/* Modal & toast */
.modal-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    opacity:0;
    transition:.16s;
    z-index:50
}

.modal-backdrop.show{
    opacity:1
}

  .modal-box{
    position:fixed;
    left:50%;
    top:12vh;
    transform:translate(-50%,6px);
    max-width:min(720px,95vw);
    width:clamp(320px,92vw,720px);
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:16px;
    opacity:0;
    transition:.16s;
    z-index:51
}

  .modal-box.show{
    opacity:1;
    transform:translate(-50%,0)
}

.modal-head{
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    font-weight:700
}

.modal-body{
    padding:16px
}

.choices{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}

@media(max-width:520px){
    .choices{grid-template-columns:1fr
    }
}

  .field{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin:10px 0
}

.email-input,.textarea{
    background:var(--card);
    border:1px solid var(--border);
    color:var(--fg);
    border-radius:12px;
    padding:10px 12px
}

  .footer-modal{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding:14px 16px;
    border-top:1px solid var(--border)
}

  .toast{
    position:fixed;
    bottom:16px;
    left:50%;
    transform:translateX(-50%) translateY(6px);
    background:var(--panel);
    border:1px solid var(--border);
    padding:10px 12px;
    border-radius:12px;
    opacity:0;
    transition:.16s;
    z-index:60
}

  .toast.show{
    opacity:1;
    transform:translateX(-50%)
}