/* ═══════════════════════════════════════════════════════════════════════════
   COMMON STYLES — shared by login.html, app.html, share.html
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --glass:rgba(255,255,255,.42);
  --glass-strong:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.55);
  --glass-shadow:0 8px 32px rgba(15,23,42,.18);
  --glass-shadow-lg:0 20px 60px rgba(15,23,42,.32);
  --accent:#6366f1;--accent-2:#8b5cf6;--accent-3:#ec4899;
  --grad:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#ec4899 100%);
  --grad-soft:linear-gradient(135deg,rgba(99,102,241,.12),rgba(236,72,153,.1));
  --ink:#1e293b;--ink-soft:#475569;--ink-muted:#94a3b8;
  --ok:#10b981;--warn:#f59e0b;--err:#ef4444;--blue:#3b82f6;
  --sans:'Inter',sans-serif;--mono:'JetBrains Mono',monospace;
  --r:16px;--r-lg:24px;--r-pill:999px;
  --ease:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --bg-img:linear-gradient(135deg,#6366f1,#ec4899);
}

html,body{height:100%}
body{
  font-family:var(--sans);font-size:14px;color:var(--ink);
  min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  position:relative;background-color:#1e293b;
}

/* ── Random background image (set via JS) ── */
body::before{
  content:'';position:fixed;inset:-30px;
  background-image:var(--bg-img);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:brightness(.8) saturate(1.12);
  transform:scale(1.04);
  z-index:-2;
  opacity:0;transition:opacity 1.2s ease;
}
body.bg-ready::before{opacity:1}

/* Color tint overlay */
body::after{
  content:'';position:fixed;inset:0;
  background:linear-gradient(135deg,rgba(99,102,241,.22),rgba(236,72,153,.18) 50%,rgba(14,116,144,.2));
  z-index:-1;pointer-events:none;
}

/* ── Floating bubble decor ── */
.bg-bubbles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-bubbles span{
  position:absolute;border-radius:50%;
  animation:float 20s ease-in-out infinite;
  filter:blur(2px);will-change:transform;mix-blend-mode:screen;
}
.bg-bubbles span:nth-child(1){width:300px;height:300px;left:-80px;top:-60px;animation-delay:0s;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),rgba(255,255,255,0))}
.bg-bubbles span:nth-child(2){width:220px;height:220px;right:-40px;top:12%;animation-delay:-4s;
  background:radial-gradient(circle at 30% 30%,rgba(236,72,153,.5),rgba(236,72,153,0))}
.bg-bubbles span:nth-child(3){width:360px;height:360px;right:8%;bottom:-90px;animation-delay:-8s;
  background:radial-gradient(circle at 30% 30%,rgba(99,102,241,.5),rgba(99,102,241,0))}
.bg-bubbles span:nth-child(4){width:180px;height:180px;left:18%;bottom:18%;animation-delay:-12s;
  background:radial-gradient(circle at 30% 30%,rgba(59,130,246,.5),rgba(59,130,246,0))}
.bg-bubbles span:nth-child(5){width:140px;height:140px;left:48%;top:38%;animation-delay:-16s;
  background:radial-gradient(circle at 30% 30%,rgba(16,185,129,.45),rgba(16,185,129,0))}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(38px,-46px) scale(1.12)}
  66%{transform:translate(-26px,36px) scale(.92)}
}

/* ── Ripple ── */
.ripple-span{
  position:absolute;border-radius:50%;
  background:currentColor;opacity:.32;
  transform:scale(0);pointer-events:none;
  animation:ripple-ex .65s ease-out forwards;
}
@keyframes ripple-ex{to{transform:scale(2.8);opacity:0}}

/* ── Entry / interaction animations ── */
@keyframes bubble-in{
  0%{opacity:0;transform:translateY(12px) scale(.96)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes pop-in{
  0%{opacity:0;transform:scale(.85)}
  55%{opacity:1;transform:scale(1.04)}
  100%{transform:scale(1)}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-6px)}
  40%,80%{transform:translateX(6px)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
  70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* ── Utility ── */
.hide{display:none!important}
input,textarea{font-family:var(--sans)}
label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);
  margin-bottom:6px;margin-left:14px;letter-spacing:.02em}

/* ── Inputs ── */
input[type=text],input[type=password],input[type=date],textarea{
  width:100%;border:1.5px solid transparent;
  background:rgba(255,255,255,.82);border-radius:var(--r-pill);
  padding:13px 20px;font-size:14px;color:var(--ink);
  outline:none;transition:all .28s var(--ease-out);
  box-shadow:inset 0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.04);
  backdrop-filter:blur(8px);
}
textarea{border-radius:var(--r);resize:vertical;min-height:84px;font-family:var(--mono);font-size:12px;line-height:1.6}
input[type=text]:focus,input[type=password]:focus,input[type=date]:focus,textarea:focus{
  border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 4px rgba(99,102,241,.2),0 6px 16px rgba(99,102,241,.15);
  transform:translateY(-1px);
}
input::placeholder,textarea::placeholder{color:var(--ink-muted)}
.field{margin-bottom:16px}

/* ── Buttons ── */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 26px;border-radius:var(--r-pill);
  font-family:var(--sans);font-size:13px;font-weight:600;
  cursor:pointer;border:none;color:#fff;
  transition:all .25s var(--ease-out);white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn-primary{
  background:#fa87cc;
  box-shadow:0 6px 20px rgba(250,135,204,.45),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover{
  background:#e76bb3;
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 10px 28px rgba(250,135,204,.58),inset 0 1px 0 rgba(255,255,255,.32);
}
.btn-primary:active{transform:translateY(0) scale(.97)}
.btn-primary:disabled{background:#cbd5e1;box-shadow:none;cursor:not-allowed;transform:none}
.btn-outline{
  background:rgba(255,255,255,.55);color:var(--ink);
  border:1.5px solid rgba(255,255,255,.65);backdrop-filter:blur(8px);
}
.btn-outline:hover{
  background:rgba(255,255,255,.82);border-color:var(--accent);color:var(--accent);
  transform:translateY(-1px);
}
.btn-ghost{background:transparent;color:#fff;padding:6px 12px;
  font-size:12px;border-radius:var(--r-pill)}
.btn-ghost:hover{color:var(--accent);background:rgba(255,255,255,.85)}
.btn-danger{
  background:rgba(239,68,68,.15);color:var(--err);
  padding:7px 14px;font-size:12px;font-weight:600;
  border:1.5px solid rgba(239,68,68,.3);
}
.btn-danger:hover{background:rgba(239,68,68,.25);transform:translateY(-1px)}
.btn-sm{padding:8px 18px;font-size:12px}
.btn-full{width:100%}

/* ── Tags ── */
.tag{display:inline-block;font-size:11px;font-weight:600;padding:4px 12px;
  border-radius:var(--r-pill);font-family:var(--mono);letter-spacing:.02em}
.tag-ok{background:rgba(16,185,129,.2);color:#047857}
.tag-err{background:rgba(239,68,68,.2);color:#b91c1c}
.tag-warn{background:rgba(245,158,11,.22);color:#b45309}
.tag-blue{background:rgba(59,130,246,.2);color:#1d4ed8}

/* ── Spinner ── */
.spin{display:inline-block;width:14px;height:14px;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:currentColor;
  border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}

/* ── Messages ── */
.msg-ok,.msg-err{padding:11px 16px;border-radius:var(--r);font-size:13px;margin-top:12px;
  backdrop-filter:blur(8px);animation:bubble-in .4s var(--ease-out)}
.msg-ok{background:rgba(16,185,129,.18);color:#065f46;border:1.5px solid rgba(16,185,129,.35)}
.msg-err{background:rgba(239,68,68,.18);color:#991b1b;border:1.5px solid rgba(239,68,68,.35);
  animation:bubble-in .4s var(--ease-out),shake .4s .05s ease}

/* ── Toast ── */
#toast{
  position:fixed;bottom:32px;left:50%;
  transform:translateX(-50%) translateY(24px) scale(.9);
  background:rgba(255,255,255,.9);color:var(--ink);
  padding:13px 26px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;opacity:0;
  transition:all .35s var(--ease);z-index:9999;
  pointer-events:none;max-width:90vw;text-align:center;
  backdrop-filter:blur(20px);
  box-shadow:var(--glass-shadow-lg);
  border:1.5px solid var(--glass-border);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
#toast.ok{background:linear-gradient(135deg,rgba(16,185,129,.96),rgba(5,150,105,.96));
  color:#fff;border-color:rgba(255,255,255,.3)}
#toast.err{background:linear-gradient(135deg,rgba(239,68,68,.96),rgba(220,38,38,.96));
  color:#fff;border-color:rgba(255,255,255,.3)}

/* ── Modal ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.45);
  backdrop-filter:blur(12px);z-index:500;
  display:flex;align-items:center;justify-content:center;padding:16px;
  animation:fade-in .25s ease-out;
}
.modal{
  background:rgba(255,255,255,.78);backdrop-filter:blur(28px) saturate(180%);
  border-radius:var(--r-lg);width:100%;max-width:460px;
  max-height:90vh;overflow-y:auto;
  box-shadow:var(--glass-shadow-lg);
  border:1.5px solid var(--glass-border);
  animation:pop-in .42s var(--ease);
}
.modal-hd{display:flex;align-items:center;justify-content:space-between;
  padding:22px 26px 18px;border-bottom:1px solid rgba(15,23,42,.08)}
.modal-title{font-size:16px;font-weight:700}
.modal-close{
  position:relative;overflow:hidden;
  background:rgba(15,23,42,.06);border:none;cursor:pointer;color:var(--ink-soft);
  font-size:18px;line-height:1;padding:0;width:32px;height:32px;
  border-radius:var(--r-pill);transition:all .25s var(--ease-out);
  display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{background:rgba(239,68,68,.16);color:var(--err);transform:rotate(90deg)}
.modal-body{padding:22px 26px 26px}

/* ── Captcha (used by login + share) ── */
.captcha-row{display:flex;align-items:center;gap:10px}
.captcha-row input{flex:1;font-family:var(--mono);letter-spacing:.15em;
  text-transform:uppercase;text-align:center}
.captcha-img{
  flex-shrink:0;width:120px;height:46px;border-radius:var(--r);overflow:hidden;
  cursor:pointer;background:#fff;border:1.5px solid var(--glass-border);
  transition:all .25s var(--ease-out);position:relative;
}
.captcha-img:hover{transform:rotate(-2deg) scale(1.04);box-shadow:0 6px 14px rgba(99,102,241,.3)}
.captcha-img img{width:100%;height:100%;display:block}
.captcha-hint{font-size:11px;color:var(--ink-muted);margin-top:6px;text-align:right;margin-right:14px}

/* ── Welcome state ── */
.welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:280px;text-align:center;color:var(--ink-muted);gap:10px}
.welcome h2{font-size:16px;font-weight:600;color:var(--ink-soft)}
.welcome p{font-size:13px;line-height:1.7;max-width:300px}

/* ── Section title ── */
.sec-title{font-size:13px;font-weight:700;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:18px;letter-spacing:.01em}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.45);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.7)}