/* DROPH — soft pastel theme, mobile-first */
:root{
  --bg-1:#fff5fb;
  --bg-2:#f3ecff;
  --bg-3:#eaf6ff;
  --pink:#ff7ac6;
  --pink-2:#ff5db1;
  --lav:#a98cff;
  --mint:#7be0c2;
  --sun:#ffd166;
  --rose:#ff8aa8;
  --ink:#2b1d3a;
  --muted:#8a7aa3;
  --card:rgba(255,255,255,.78);
  --line:rgba(169,140,255,.18);
  --shadow:0 8px 30px rgba(169,140,255,.15);
  --radius:18px;
  --radius-sm:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Inter,sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:
    radial-gradient(1000px 600px at 10% -10%, #ffd6ec 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #d9c8ff 0%, transparent 55%),
    radial-gradient(800px 500px at 50% 110%, #c8e8ff 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  -webkit-font-smoothing:antialiased;
}
a{color:var(--pink-2);text-decoration:none}
a:hover{text-decoration:underline}

/* layout */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:240px;flex:0 0 240px;
  padding:22px 16px;
  background:linear-gradient(180deg,#ffffffd9,#fff0f9cc);
  border-right:1px solid var(--line);
  position:sticky;top:0;align-self:flex-start;height:100vh;
  backdrop-filter:blur(12px);
}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.brand-logo{
  width:38px;height:38px;border-radius:12px;
  background:conic-gradient(from 200deg,var(--pink),var(--lav),var(--mint),var(--pink));
  box-shadow:var(--shadow);
}
.brand-domain{display:block;font-size:10px;color:var(--muted);margin-top:1px;letter-spacing:.2px;word-break:break-all}
.brand-domain a{color:var(--muted)}
.brand-domain a:hover{color:var(--pink-2)}
.brand-name{font-weight:800;font-size:18px;letter-spacing:.3px}
.brand-sub{font-size:11px;color:var(--muted);margin-top:1px}

.nav{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.nav a{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:12px;color:var(--ink);
  font-weight:600;font-size:14px;
  transition:all .18s ease;
}
.nav a:hover{background:#ffffffb8;text-decoration:none;transform:translateX(2px)}
.nav a.active{
  background:linear-gradient(135deg,#ffd2ec,#dccaff);
  box-shadow:var(--shadow);
}
.nav .ico{font-size:16px}

.main{flex:1;padding:28px 32px 80px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:12px;flex-wrap:wrap}
.h1{font-size:26px;font-weight:800;letter-spacing:.2px;margin:0}
.muted{color:var(--muted);font-size:13px}
.user-chip{
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 12px;background:#ffffffcc;border:1px solid var(--line);
  border-radius:999px;font-size:13px;
}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 18px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(169,140,255,.22)}
.card .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.card .value{font-size:30px;font-weight:800;margin-top:6px}
.card.pink .value{color:var(--pink-2)}
.card.lav .value{color:var(--lav)}
.card.mint .value{color:#2bb88d}
.card.sun .value{color:#d99a00}

/* panel */
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}
.panel h2{margin:0 0 12px;font-size:18px}
.panel .hint{color:var(--muted);font-size:13px;margin-bottom:14px}

/* form */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;color:var(--muted);font-weight:600}
textarea,input[type=text],input[type=password],input[type=number]{
  width:100%;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:14px;
  font-family:inherit;
  color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
textarea{min-height:140px;resize:vertical;line-height:1.45;font-family:ui-monospace,Menlo,monospace;font-size:13px}
input:focus,textarea:focus{outline:none;border-color:var(--lav);box-shadow:0 0 0 4px rgba(169,140,255,.18)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;border:none;cursor:pointer;
  font-weight:700;font-size:14px;color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--lav));
  box-shadow:0 6px 18px rgba(255,122,198,.35);
  transition:transform .15s, box-shadow .2s, opacity .15s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(255,122,198,.45)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{
  background:#fff;color:var(--ink);
  border:1.5px solid var(--line);
  box-shadow:none;
}
.btn.ghost:hover{background:#fbf3ff}

/* progress */
.progress{
  width:100%;height:10px;border-radius:99px;background:#fff;border:1px solid var(--line);
  overflow:hidden;margin-top:6px;
}
.progress > div{
  height:100%;
  background:linear-gradient(90deg,var(--pink),var(--lav),var(--mint));
  background-size:200% 100%;
  animation:shine 1.6s linear infinite;
  width:0%;
  transition:width .3s ease;
}
@keyframes shine{0%{background-position:0% 0}100%{background-position:200% 0}}

/* results */
.summary{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.pill{
  padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;
  background:#ffffffcc;border:1px solid var(--line);
}
.pill.free{background:#dff8ec;border-color:#a9e6c8;color:#1f8c5b}
.pill.taken{background:#ffe1e8;border-color:#f8b6c2;color:#b53557}
.pill.unk{background:#fff3d6;border-color:#f6dd9a;color:#a06b00}

.tbl{width:100%;border-collapse:separate;border-spacing:0;margin-top:8px;font-size:14px}
.tbl th,.tbl td{padding:10px 12px;text-align:left}
.tbl thead th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--line)}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:#fff}
.tbl tbody td{border-bottom:1px dashed var(--line)}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.tag.free{background:#dff8ec;color:#1f8c5b}
.tag.taken{background:#ffe1e8;color:#b53557}
.tag.unk{background:#fff3d6;color:#a06b00}

/* login */
.login-shell{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.login-card{
  width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);
  border-radius:24px;padding:28px;box-shadow:var(--shadow);backdrop-filter:blur(12px);
}
.login-card h1{margin:0 0 4px;font-size:24px}
.login-card p.sub{margin:0 0 18px;color:var(--muted);font-size:13px}
.error-box{background:#ffe1e8;color:#b53557;padding:10px 14px;border-radius:12px;font-size:13px;margin-bottom:12px}

/* === Octopus mascot === */
.octo{display:inline-block;vertical-align:middle;filter:drop-shadow(0 6px 14px rgba(255,95,168,.35))}
.octo .octo-tents-back .t{transform-origin:center;animation:octoSwayBack 3.5s ease-in-out infinite}
.octo .octo-tents-front .t{transform-origin:center;animation:octoSwayFront 2.8s ease-in-out infinite}
.octo .t1{animation-delay:-.2s}
.octo .t2{animation-delay:-.6s}
.octo .t3{animation-delay:-1.0s}
.octo .t4{animation-delay:-1.4s}
.octo .f1{animation-delay:-.1s}
.octo .f2{animation-delay:-.5s}
.octo .f3{animation-delay:-.9s}
.octo .f4{animation-delay:-1.3s}
.octo .octo-eyes{animation:octoBlink 5.5s ease-in-out infinite}
@keyframes octoSwayBack{
  0%,100%{transform:rotate(-3deg) translateY(0)}
  50%{transform:rotate(3deg) translateY(-2px)}
}
@keyframes octoSwayFront{
  0%,100%{transform:rotate(2deg) translateY(0)}
  50%{transform:rotate(-3deg) translateY(2px)}
}
@keyframes octoBlink{
  0%,92%,100%{transform:scaleY(1)}
  94%,96%{transform:scaleY(.1)}
}
.octo-float{animation:octoFloat 4s ease-in-out infinite}
@keyframes octoFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-10px) rotate(2deg)}
}

/* Brand: octopus replaces the gradient logo */
.brand-logo-octo{width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 42px}
.brand-logo-octo .octo{filter:drop-shadow(0 4px 10px rgba(255,95,168,.45))}

/* Floating mascot in the corner of every dashboard page */
.mascot-corner{
  position:fixed;right:24px;bottom:18px;
  pointer-events:none;
  z-index:5;opacity:.92;
}
.mascot-corner .octo{width:84px;height:84px}
.mascot-corner.greet{animation:octoGreet 1s ease-out 1}
@keyframes octoGreet{
  0%{transform:translateX(120%) rotate(20deg);opacity:0}
  100%{transform:translateX(0) rotate(0);opacity:.92}
}
@media (max-width: 800px){
  .mascot-corner{right:8px;bottom:8px}
  .mascot-corner .octo{width:60px;height:60px}
}

/* Login: big hero octopus */
.login-hero{display:flex;justify-content:center;margin:-12px 0 6px}
.login-hero .octo{width:120px;height:120px}

/* Empty state */
.empty-state{text-align:center;padding:24px 8px}
.empty-state .octo{width:120px;height:120px;margin-bottom:8px}
.empty-state h3{margin:8px 0 4px;color:var(--ink)}
.empty-state p{color:var(--muted);font-size:14px;margin:0}

/* Bubbles inside loader */
.bubbles{position:relative;height:80px;width:100%;overflow:hidden;pointer-events:none}
.bubbles span{
  position:absolute;bottom:-18px;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#ffd6ec 60%,transparent 70%);
  opacity:.7;animation:bubbleUp 4s linear infinite;
}
.bubbles span:nth-child(1){left:10%;animation-delay:0s;width:8px;height:8px}
.bubbles span:nth-child(2){left:25%;animation-delay:.6s;width:14px;height:14px}
.bubbles span:nth-child(3){left:42%;animation-delay:1.2s;width:6px;height:6px}
.bubbles span:nth-child(4){left:60%;animation-delay:1.8s;width:11px;height:11px}
.bubbles span:nth-child(5){left:78%;animation-delay:2.4s;width:9px;height:9px}
.bubbles span:nth-child(6){left:88%;animation-delay:3.0s;width:13px;height:13px}
@keyframes bubbleUp{
  0%{transform:translateY(0) scale(.7);opacity:0}
  10%{opacity:.8}
  90%{opacity:.7}
  100%{transform:translateY(-100px) scale(1);opacity:0}
}

/* Loader with octopus */
.octo-loader{display:flex;align-items:center;gap:14px;padding:10px 0}
.octo-loader .octo{width:56px;height:56px}
.octo-loader .pulse{animation:octoFloat 2s ease-in-out infinite}

/* mobile */
@media (max-width: 800px){
  .shell{flex-direction:column}
  .sidebar{
    position:relative;width:100%;height:auto;flex:initial;
    padding:14px;border-right:none;border-bottom:1px solid var(--line);
  }
  .nav{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:4px}
  .nav a{flex:0 0 auto;padding:10px 14px;font-size:13px}
  .main{padding:20px 16px 60px}
  .h1{font-size:22px}
  .card .value{font-size:24px}
}