/* ゆみ VPN — thème kawaii japonais 🌸 */
:root{
  --pink:#ff8fb8; --pink-soft:#ffd6e8; --pink-bg:#fff2f8;
  --lav:#a98cf0; --lav-soft:#e3d9ff;
  --mint:#5fd6ac; --mint-soft:#c5f3e4;
  --sky:#7cc8ff; --sky-soft:#d6efff;
  --cream:#fffafc;
  --ink:#5b4a63; --ink-soft:#9a8aa3; --ink-strong:#3a2b4d;
  --card:#ffffff; --line:#ffe1ee;
  --ok:#3fbf8f; --danger:#ff7a9c; --warn:#ffb454;
  --shadow:0 18px 40px rgba(255,143,184,.22), 0 6px 14px rgba(169,140,240,.14);
  --radius:26px; --radius-sm:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  color:var(--ink); min-height:100vh;
  background:
    radial-gradient(1200px 600px at 12% -8%, var(--lav-soft) 0%, transparent 55%),
    radial-gradient(1000px 520px at 108% 8%, var(--sky-soft) 0%, transparent 50%),
    radial-gradient(900px 700px at 50% 120%, var(--mint-soft) 0%, transparent 55%),
    linear-gradient(160deg, var(--pink-bg), #f7f0ff 60%, #eefaf5);
  background-attachment:fixed;
}
h1,h2,.login-title,.brand-text h1{font-family:"Mochiy Pop One","M PLUS Rounded 1c",sans-serif;font-weight:400}
button{font-family:inherit}

/* ---- pétales de sakura ---- */
.petals{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.petals::before,.petals::after{
  content:"🌸";position:absolute;top:-40px;font-size:20px;opacity:.55;
  animation:fall 14s linear infinite;
}
.petals::before{left:12%;animation-delay:0s}
.petals::after{left:74%;font-size:15px;animation-delay:6s}
@keyframes fall{
  0%{transform:translateY(-40px) rotate(0);opacity:0}
  10%{opacity:.6}
  100%{transform:translateY(105vh) rotate(360deg);opacity:.15}
}

/* ---- mascotte ゆみたん (nuage-chat) ---- */
.mascot{width:120px;height:104px;margin:0 auto 6px;position:relative;animation:bob 3.4s ease-in-out infinite}
.mascot-sm{width:56px;height:50px;margin:0}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.mascot-body{
  position:absolute;inset:0;background:#fff;border-radius:50% 50% 46% 46%/56% 56% 44% 44%;
  box-shadow:0 10px 22px rgba(169,140,240,.28), inset 0 -8px 14px rgba(255,214,232,.6);
}
.ear{position:absolute;top:-10px;width:26px;height:26px;background:#fff;border-radius:50% 50% 8% 50%}
.mascot-sm .ear{width:14px;height:14px;top:-5px}
.ear-l{left:16%;transform:rotate(-18deg)}
.ear-r{right:16%;transform:rotate(18deg) scaleX(-1)}
.eye{position:absolute;top:42%;width:12px;height:14px;background:var(--ink-strong);border-radius:50%}
.mascot-sm .eye{width:6px;height:7px}
.eye-l{left:32%}.eye-r{right:32%}
.eye::after{content:"";position:absolute;top:2px;left:2px;width:4px;height:4px;background:#fff;border-radius:50%}
.mascot-sm .eye::after{width:2px;height:2px;top:1px;left:1px}
.blush{position:absolute;top:56%;width:16px;height:10px;background:var(--pink-soft);border-radius:50%;opacity:.9}
.mascot-sm .blush{width:8px;height:5px}
.blush-l{left:20%}.blush-r{right:20%}
.mouth{position:absolute;top:58%;left:50%;width:12px;height:8px;transform:translateX(-50%);
  border:2px solid var(--ink-strong);border-top:0;border-radius:0 0 12px 12px}
.mascot-sm .mouth{width:7px;height:4px;border-width:1.5px}

/* ---- LOGIN ---- */
.login-body{display:grid;place-items:center;padding:24px}
.login-card{
  position:relative;z-index:1;width:min(420px,94vw);background:var(--card);
  border:2px solid var(--line);border-radius:34px;box-shadow:var(--shadow);
  padding:34px 30px 26px;text-align:center;
}
.login-title{font-size:34px;margin:6px 0 2px;color:var(--ink-strong);letter-spacing:1px}
.login-sub{margin:0 0 18px;color:var(--ink-soft);font-size:14px}
.login-form{display:flex;flex-direction:column;gap:14px;text-align:left;margin-top:8px}
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:12.5px;color:var(--lav);font-weight:700;padding-left:6px}
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;box-sizing:border-box;padding-right:48px}
.pw-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  border:0;background:transparent;cursor:pointer;color:var(--ink-soft);border-radius:10px;
  transition:color .15s,background .15s}
.pw-toggle:hover{color:var(--lav);background:var(--pink-bg)}
.pw-toggle .ic-eye-off{display:none}
.pw-toggle.on .ic-eye{display:none}
.pw-toggle.on .ic-eye-off{display:block}
input[type=text],input[type=password]{
  border:2px solid var(--line);border-radius:16px;padding:13px 16px;font-size:15px;
  background:var(--pink-bg);color:var(--ink-strong);outline:none;transition:.18s;font-family:inherit;
}
input:focus{border-color:var(--pink);background:#fff;box-shadow:0 0 0 4px rgba(255,143,184,.16)}
.login-foot{margin:16px 0 0;color:var(--pink);font-size:13px}
.alert{background:#fff0f4;border:2px solid var(--pink-soft);color:#d6547a;border-radius:16px;
  padding:10px 14px;font-size:13.5px;margin-bottom:6px}

/* ---- boutons ---- */
.btn{border:none;border-radius:16px;padding:11px 18px;font-size:14px;font-weight:700;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s;color:#fff}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-primary{background:linear-gradient(135deg,var(--pink),var(--lav));box-shadow:0 8px 18px rgba(255,143,184,.4)}
.btn-primary:hover{filter:brightness(1.05);box-shadow:0 12px 24px rgba(255,143,184,.5)}
.btn-big{padding:14px;font-size:16px;margin-top:6px}
.btn-ghost{background:#fff;color:var(--lav);border:2px solid var(--lav-soft);box-shadow:none}
.btn-ghost:hover{background:var(--lav-soft)}
.btn-create{width:100%;margin:2px 0 12px}
.icon-btn{border:none;background:transparent;cursor:pointer;font-size:17px;padding:6px 8px;border-radius:12px;
  transition:.12s;line-height:1}
.icon-btn:hover{background:var(--pink-bg);transform:scale(1.12)}
.icon-btn.danger:hover{background:#ffe6ec}

/* ---- topbar ---- */
.topbar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:18px 26px;max-width:1180px;margin:8px auto 0}
.brand{display:flex;align-items:center;gap:14px}
.brand-text h1{font-size:22px;margin:0;color:var(--ink-strong);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.brand-en{font-family:"M PLUS Rounded 1c";font-size:12px;color:#fff;background:linear-gradient(135deg,var(--lav),var(--sky));
  padding:3px 10px;border-radius:999px;font-weight:800;letter-spacing:.5px}
.brand-sub{margin:2px 0 0;color:var(--ink-soft);font-size:13px}
.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.whoami{border:none;background:transparent;cursor:pointer;color:var(--lav);font-weight:700;
  font-size:13.5px;font-family:inherit;padding:7px 12px;border-radius:14px;border:2px solid var(--lav-soft)}
.whoami:hover{background:var(--lav-soft)}

/* ---- sélecteur de langue ---- */
.lang-switch{display:flex;gap:2px;background:var(--pink-bg);border-radius:999px;padding:3px}
.lang-switch button{border:none;background:transparent;cursor:pointer;font-size:16px;line-height:1;
  padding:4px 7px;border-radius:999px;opacity:.5;transition:.15s}
.lang-switch button:hover{opacity:1;transform:scale(1.12)}
.lang-switch button.active{opacity:1;background:#fff;box-shadow:0 2px 6px rgba(255,143,184,.35)}
.login-lang{position:fixed;top:16px;right:16px;z-index:3}

/* ---- gestion utilisateurs ---- */
.user-list{display:flex;flex-direction:column;gap:8px;max-height:42vh;overflow:auto;margin-bottom:14px}
.user-row{display:flex;align-items:center;gap:10px;background:var(--pink-bg);border-radius:var(--radius-sm);padding:9px 12px}
.user-main{flex:1;min-width:0}
.user-name{font-weight:700;color:var(--ink-strong);font-size:14px}
.you-tag{color:var(--lav);font-weight:800;font-size:11px}
.user-meta{font-size:11.5px;color:var(--ink-soft)}
.add-user{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.add-user input{flex:1;min-width:0}
.add-user input+input{flex:1}

/* ---- board ---- */
.board{position:relative;z-index:1;max-width:1180px;margin:14px auto 0;padding:8px 22px 40px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.server-card{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 18px;display:flex;flex-direction:column}
.server-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.flag{font-size:34px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.12))}
.server-name{flex:1}
.server-name h2{margin:0;font-size:18px;color:var(--ink-strong)}
.server-name p{margin:1px 0 0;font-size:12px;color:var(--ink-soft)}
.server-ip{display:inline-flex;align-items:center;gap:3px;margin-top:5px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:11.5px;
  font-weight:600;letter-spacing:.2px;color:#7a6f86;text-decoration:none;
  background:var(--mint-soft,#eafaf3);border:1px solid rgba(0,0,0,.05);
  padding:2px 8px 2px 6px;border-radius:999px;transition:background .15s,color .15s}
.server-ip:hover{background:#d9f3e8;color:#1f8f6b}
.server-ip .ip-pin{font-size:11px;filter:grayscale(.1)}
.count-pill{background:var(--mint-soft);color:#1f8f6b;font-weight:800;font-size:12.5px;
  padding:5px 12px;border-radius:999px;min-width:34px;text-align:center}

/* ---- liste clients ---- */
.client-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto;padding-right:2px}
.client-list::-webkit-scrollbar{width:8px}
.client-list::-webkit-scrollbar-thumb{background:var(--pink-soft);border-radius:99px}
.client-row{display:flex;align-items:center;gap:10px;background:var(--pink-bg);border:2px solid transparent;
  border-radius:var(--radius-sm);padding:9px 12px;transition:.15s}
.client-row:hover{border-color:var(--pink-soft);background:#fff}
.client-row.revoked{opacity:.6;background:#f4f1f6}
.client-row.revoked .client-name{text-decoration:line-through;color:var(--ink-soft)}
.client-main{flex:1;min-width:0}
.client-name{font-weight:700;color:var(--ink-strong);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-meta{font-size:11.5px;color:var(--ink-soft);margin-top:1px}
.badge{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap}
.badge.ok{background:var(--mint-soft);color:#1f8f6b}
.badge.revoked{background:#ffe0e7;color:#c94f70}
.badge.expired{background:#fff0d6;color:#b57a1e}
.row-actions{display:flex;gap:2px}
.empty,.loading{text-align:center;color:var(--ink-soft);font-size:13px;padding:18px 6px}

/* ---- bandeau santé (supervision) ---- */
.health-strip{display:flex;align-items:center;gap:8px;width:100%;border:none;cursor:pointer;
  border-radius:14px;padding:8px 12px;margin:0 0 12px;font-size:12.5px;font-weight:700;
  text-align:left;transition:.15s;background:var(--pink-bg);color:var(--ink)}
.health-strip:hover{filter:brightness(.98);transform:translateY(-1px)}
.health-strip.up{background:linear-gradient(135deg,#e4fbef,#d3f6e7);color:#1f8f6b}
.health-strip.warn{background:linear-gradient(135deg,#fff3d6,#ffe7bd);color:#a86a12}
.health-strip.down{background:linear-gradient(135deg,#ffe0e7,#ffcfdb);color:#c23a5e;
  animation:pulseDown 1.6s ease-in-out infinite}
@keyframes pulseDown{0%,100%{box-shadow:0 0 0 0 rgba(255,122,156,.55)}50%{box-shadow:0 0 0 7px rgba(255,122,156,0)}}
.hb-dot{font-size:10px;line-height:1}
.hb-txt{font-weight:800;letter-spacing:.4px}
.hb-meta{margin-left:auto;font-weight:600;opacity:.85;font-size:11.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:56%}

/* ---- panneau diagnostic ---- */
.diag-grid{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13px;margin-top:8px}
.diag-k{color:var(--ink-soft);font-weight:600}
.diag-v{color:var(--ink-strong);font-weight:700;text-align:right}
.diag-alert{background:#ffe0e7;color:#c23a5e;border-radius:12px;padding:10px 12px;font-weight:800;
  font-size:12.5px;margin-bottom:8px}
.diag-detail{background:var(--pink-bg);color:var(--ink);border-radius:12px;padding:9px 12px;
  font-size:12.5px;margin-bottom:10px}

/* ---- footer ---- */
.board-foot{position:relative;z-index:1;text-align:center;padding:0 0 40px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---- modale ---- */
.modal-overlay{position:fixed;inset:0;z-index:50;background:rgba(90,74,99,.42);
  backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;animation:fade .2s ease}
.modal-overlay[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{position:relative;width:min(440px,94vw);background:var(--card);border:2px solid var(--line);
  border-radius:30px;box-shadow:var(--shadow);padding:26px 24px;animation:pop .28s cubic-bezier(.2,1.3,.5,1)}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.modal-close{position:absolute;top:14px;right:14px;border:none;background:var(--pink-bg);color:var(--ink-soft);
  width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px;font-weight:800}
.modal-close:hover{background:var(--pink-soft);color:#fff}
.modal h3{font-family:"Mochiy Pop One";font-weight:400;margin:0 0 4px;color:var(--ink-strong);font-size:20px}
.modal .sub{color:var(--ink-soft);font-size:13px;margin:0 0 16px}
.modal .field{margin-bottom:14px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.qr-wrap{text-align:center}
.qr-wrap img{width:220px;height:220px;image-rendering:pixelated;border:8px solid #fff;border-radius:20px;
  box-shadow:0 10px 24px rgba(124,200,255,.35);background:#fff}
.result-name{font-weight:800;color:var(--pink);font-size:16px}
.hint{background:var(--sky-soft);border-radius:14px;padding:10px 12px;font-size:12.5px;color:#2a6a9c;margin:14px 0}
.dl-row{display:flex;gap:10px;justify-content:center;margin-top:8px;flex-wrap:wrap}

/* ---- toasts ---- */
.toast-wrap{position:fixed;z-index:80;bottom:20px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:10px;align-items:center;width:min(420px,92vw)}
.toast{width:100%;background:#fff;border:2px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:12px 16px;font-size:13.5px;font-weight:700;color:var(--ink-strong);animation:slidein .3s ease}
.toast.ok{border-color:var(--mint-soft)}
.toast.err{border-color:var(--pink-soft);color:#d6547a}
@keyframes slidein{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ---- audit ---- */
.audit-list{display:flex;flex-direction:column;gap:7px;max-height:56vh;overflow:auto;text-align:left}
.audit-line{font-size:12.5px;padding:8px 11px;background:var(--pink-bg);border-radius:14px;
  border-left:4px solid var(--mint)}
.audit-line.fail{border-left-color:var(--danger);background:#fff2f5}
.audit-line .a-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.audit-line .a-bot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:3px;
  color:var(--ink-soft);font-size:11.5px}
.audit-line .a-who{font-weight:800;color:var(--lav)}
.audit-line .a-act{font-weight:700;color:var(--ink-strong)}
.audit-line .a-res{font-weight:800;font-size:11px;padding:1px 8px;border-radius:999px}
.audit-line .a-ok{background:var(--mint-soft);color:#1f8f6b}
.audit-line .a-fail{background:#ffe0e7;color:#c94f70}
.audit-line .a-time{color:var(--ink-soft);margin-left:auto;font-weight:600}
.audit-line .a-target{font-weight:600;color:var(--ink)}
.audit-line .a-detail{color:var(--danger);flex-basis:100%}

@media (max-width:560px){
  .brand-sub,.whoami{display:none}
  .board{padding:8px 14px 30px}
}

/* ---- petite touche mode sombre (reste doux) ---- */
@media (prefers-color-scheme:dark){
  :root{--card:#2a2333;--cream:#2a2333;--ink:#e8dcf0;--ink-soft:#b09cc0;--ink-strong:#fff;
    --line:#3d3350;--pink-bg:#332a40}
  body{background:
    radial-gradient(1200px 600px at 12% -8%, #3a2c53 0%, transparent 55%),
    radial-gradient(1000px 520px at 108% 8%, #263a54 0%, transparent 50%),
    linear-gradient(160deg,#241d30,#2a2140 60%,#1f2e2b)}
  input[type=text],input[type=password]{background:#332a40;color:#fff}
  .client-row.revoked{background:#241d30}
  /* mascotte : le corps reste blanc → garder yeux + bouche foncés (sinon invisibles) */
  .eye{background:#3a2b4d}
  .eye::after{background:#fff}
  .mouth{border-color:#3a2b4d}
}
:root[data-theme="light"]{color-scheme:light}