/* ══════════════════════════════════════════════════════════════════
   style.css — ChainGreets — Feuille de style principale
   ══════════════════════════════════════════════════════════════════ */

/* ── VARIABLES THÈME ── */
:root[data-theme="dark"] {
  --bg:#1c1a17;  --bg2:#252220;  --bg3:#2e2b27;  --bg4:#38342f;
  --border:#3d3830;  --border2:#4a443b;
  --accent:#c9a96e;  --accent2:#8b7355;  --accent3:#d4875a;
  --green:#7ab87a;   --red:#c97070;
  --text:#e8e0d0;    --muted:#8a7f72;    --muted2:#6a6058;
  --shadow:rgba(0,0,0,.6);
  --card-hover:rgba(201,169,110,.05);
  --pill-bg:rgba(28,26,23,.92);
  --blob1:rgba(201,169,110,.08);  --blob2:rgba(139,115,85,.08);
  --grid-line:rgba(201,169,110,.03);
}
:root[data-theme="light"] {
  --bg:#f5f0e8;  --bg2:#fdfaf4;  --bg3:#ede8de;  --bg4:#e2ddd2;
  --border:#ccc5b5;  --border2:#b8b0a0;
  --accent:#7a5c3a;  --accent2:#9a7850;  --accent3:#b05a30;
  --green:#4a8050;   --red:#a04040;
  --text:#2e2820;    --muted:#8a8070;    --muted2:#a89e90;
  --shadow:rgba(40,30,10,.14);
  --card-hover:rgba(122,92,58,.05);
  --pill-bg:rgba(245,240,232,.94);
  --blob1:rgba(122,92,58,.07);  --blob2:rgba(154,120,80,.07);
  --grid-line:rgba(122,92,58,.04);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { transition:background .3s, color .3s; }
body {
  background:var(--bg); color:var(--text);
  font-family:'Space Mono', monospace; font-size:15px;
  min-height:100vh; overflow-x:hidden;
}

/* Grille de fond */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:40px 40px;
}

/* Blobs décoratifs */
.blob { position:fixed; border-radius:50%; filter:blur(130px); pointer-events:none; z-index:0; }
.blob-1 { width:500px; height:500px; background:var(--accent);  top:-180px; left:-80px;    opacity:.06; }
.blob-2 { width:400px; height:400px; background:var(--accent2); bottom:-120px; right:-60px; opacity:.06; }

/* ── NAV ── */
nav {
  position:sticky; top:0; z-index:50;
  background:var(--pill-bg); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; height:62px;
}
.nav-logo { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; color:var(--text); letter-spacing:-.5px; }
.nav-logo span { color:var(--accent); }
.nav-right { display:flex; align-items:center; gap:8px; }

#theme-btn {
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  width:36px; height:36px; cursor:pointer; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; color:var(--text);
}
#theme-btn:hover { border-color:var(--accent2); transform:rotate(20deg); }

#nav-chain-pill {
  display:none; align-items:center; gap:7px;
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  padding:7px 13px; font-size:11px; cursor:pointer;
  color:var(--text); font-family:'Space Mono',monospace; transition:all .2s;
}
#nav-chain-pill:hover { border-color:var(--accent2); }
#nav-chain-pill.show  { display:flex; }
.cdot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

#connect-btn {
  background:var(--accent); color:var(--bg); border:none; border-radius:8px;
  padding:9px 22px; cursor:pointer; font-family:'Space Mono',monospace;
  font-size:12px; font-weight:700; letter-spacing:.5px; transition:all .2s;
  display:flex; align-items:center; gap:8px;
  box-shadow:0 0 18px rgba(0,229,255,.28);
}
#connect-btn:hover { box-shadow:0 0 32px rgba(0,229,255,.5); transform:translateY(-1px); }
#connect-btn.connected {
  background:var(--bg3); color:var(--green);
  border:1px solid rgba(0,255,136,.22); box-shadow:none;
}
#connect-btn.connected:hover { border-color:var(--green); box-shadow:0 0 14px rgba(0,255,136,.14); }

.adot {
  width:7px; height:7px; border-radius:50%;
  background:var(--green); box-shadow:0 0 5px var(--green);
  animation:pulse 2s infinite; flex-shrink:0;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── ACCOUNT DROPDOWN ── */
.acct-drop {
  display:none; position:absolute; top:70px; right:28px; z-index:100;
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:18px; width:270px; box-shadow:0 14px 44px var(--shadow);
  animation:slideDown .18s ease;
}
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
.acct-drop.show { display:block; }
.arow  { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
.akey  { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); }
.aval  { font-size:12px; color:var(--green); font-weight:700; cursor:pointer; }
.aval:hover { color:var(--accent); }
.aval.plain { color:var(--text); cursor:default; }
.adiv  { border:none; border-top:1px solid var(--border); margin:12px 0; }
.adisc {
  width:100%; background:transparent; border:1px solid rgba(255,59,107,.22);
  border-radius:7px; color:var(--red); font-family:'Space Mono',monospace;
  font-size:11px; padding:8px; cursor:pointer; transition:all .18s;
}
.adisc:hover { background:rgba(255,59,107,.07); border-color:var(--red); }

/* ── LAYOUT ── */
.wrap { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:44px 20px 80px; }
.hero { text-align:center; margin-bottom:32px; }
.hero h1 {
  font-family:'Syne',sans-serif; font-size:clamp(26px,5vw,46px); font-weight:800;
  color:var(--text); line-height:1.1; margin-bottom:8px;
}
.hero h1 span { color:var(--accent); }
.hero p { color:var(--muted); font-size:14px; letter-spacing:.8px; }

/* ── STATS ── */
.stats-bar { display:flex; gap:10px; justify-content:center; margin-bottom:24px; flex-wrap:wrap; }
.stat-pill {
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:8px 16px; font-size:12px; color:var(--muted);
  display:flex; align-items:center; gap:6px;
}
.stat-pill strong { color:var(--accent); font-size:13px; }
.streak-pill {
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:8px 16px; font-size:11px; color:var(--muted);
  display:flex; align-items:center; gap:8px; transition:all .3s;
}
.streak-pill.active { border-color:var(--accent3); background:rgba(255,107,53,.06); }
.streak-flame { font-size:16px; transition:transform .3s; }
.streak-pill.active .streak-flame { animation:flamepulse 1.4s ease-in-out infinite; }
@keyframes flamepulse { 0%,100%{transform:scale(1) rotate(-3deg)} 50%{transform:scale(1.18) rotate(3deg)} }
.streak-num   { font-family:'Syne',sans-serif; font-size:18px; font-weight:800; color:var(--accent3); line-height:1; }
.streak-label { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-top:1px; }
.streak-best  { font-size:9px; color:var(--muted2); margin-top:1px; }

/* ── COOLDOWN ── */
.cooldown-bar {
  display:none; background:var(--bg2); border:1px solid var(--border);
  border-left:3px solid var(--accent3); border-radius:10px;
  padding:14px 20px; margin-bottom:18px;
  align-items:center; gap:14px; flex-wrap:wrap;
}
.cooldown-bar.show { display:flex; }
.cooldown-icon   { font-size:22px; }
.cooldown-text   { flex:1; min-width:200px; }
.cooldown-label  { font-size:10px; color:var(--muted); margin-bottom:3px; text-transform:uppercase; letter-spacing:1px; }
.cooldown-timer  { font-size:15px; font-weight:700; color:var(--accent3); font-family:'Syne',sans-serif; }
.cooldown-chains { font-size:10px; color:var(--muted); margin-top:3px; line-height:1.6; }

/* ── TABS ── */
.tab-bar { display:flex; gap:8px; justify-content:center; margin-bottom:24px; flex-wrap:wrap; }
.tab-btn {
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  padding:10px 20px; cursor:pointer; font-family:'Space Mono',monospace; font-size:15px;
  color:var(--muted); display:flex; align-items:center; gap:7px; transition:all .18s;
}
.tab-btn:hover { color:var(--text); border-color:var(--accent2); }
.tab-btn.active { background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:700; }
.limit-badge { font-size:8px; background:var(--accent3); color:#fff; border-radius:4px; padding:1px 5px; letter-spacing:.5px; }
.tab-btn.done-today .limit-badge { background:var(--muted2); }

/* ── FILTRE ── */
.filter-bar { display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap; align-items:center; }
.fbtn {
  background:var(--bg3); border:1px solid var(--border); border-radius:6px;
  padding:6px 14px; cursor:pointer; font-family:'Space Mono',monospace; font-size:12px;
  color:var(--muted); transition:all .15s; display:flex; align-items:center; gap:6px;
}
.fbtn:hover { color:var(--text); }
.fbtn.active { border-color:var(--accent); color:var(--accent); background:rgba(0,229,255,.05); }
.filter-count { margin-left:auto; font-size:10px; color:var(--muted); letter-spacing:1px; }

/* ── CHAIN GRID ── */
.chain-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.ccard {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:18px; transition:all .2s;
  display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden;
}
.ccard:hover  { border-color:var(--accent2); transform:translateY(-2px); box-shadow:0 8px 28px var(--shadow); }
.ccard.sel    { border-color:var(--accent); background:var(--card-hover); }
.ccard.sel::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.ccard-top { display:flex; align-items:center; justify-content:space-between; }
.cname     { font-family:'Syne',sans-serif; font-size:15px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }
.cbadge    { font-size:9px; letter-spacing:1px; text-transform:uppercase; padding:2px 7px; border-radius:4px; background:rgba(255,107,53,.1); color:var(--accent3); border:1px solid rgba(255,107,53,.22); }
.cbadge.mn { background:rgba(0,255,136,.07); color:var(--green); border-color:rgba(0,255,136,.18); }
.cinfo     { font-size:12px; color:var(--muted); }
.cfee      { color:var(--muted2); font-size:10px; letter-spacing:.3px; }
.cfaucet   { color:var(--accent2); text-decoration:none; font-size:10px; margin-left:6px; opacity:.7; transition:opacity .15s; letter-spacing:.5px; }
.cfaucet:hover { opacity:1; text-decoration:underline; }
.cbtns { display:flex; gap:7px; }
.cbtn  {
  flex:1; background:var(--bg3); border:1px solid var(--border); border-radius:6px;
  padding:7px 6px; cursor:pointer; font-family:'Space Mono',monospace; font-size:11px;
  color:var(--muted); text-align:center; transition:all .18s; letter-spacing:.4px;
}
.cbtn:hover      { color:var(--accent); border-color:var(--accent); background:rgba(0,229,255,.05); }
.cbtn.pri        { background:rgba(0,229,255,.08); color:var(--accent); border-color:rgba(0,229,255,.2); }
.cbtn.pri:hover  { background:rgba(0,229,255,.15); }
.cbtn.done       { color:var(--green); border-color:rgba(0,255,136,.2); background:rgba(0,255,136,.05); cursor:default; opacity:.7; }

/* ── LOG ── */
.log-panel  { background:var(--bg2); border:1px solid var(--border); border-radius:12px; margin-top:28px; overflow:hidden; }
.log-head   { padding:10px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.log-tabs   { display:flex; gap:4px; }
.log-tab    { background:none; border:none; color:var(--muted); font-family:'Space Mono',monospace; font-size:11px;
              cursor:pointer; padding:5px 12px; border-radius:6px; transition:all .15s; letter-spacing:.5px; }
.log-tab:hover  { color:var(--text); background:var(--bg3); }
.log-tab.active { background:var(--bg3); color:var(--accent); border:1px solid var(--border); }
.log-days   { font-size:9px; color:var(--muted2); margin-left:3px; }
.log-clr    { background:none; border:none; color:var(--muted); font-family:'Space Mono',monospace; font-size:10px; cursor:pointer; margin-left:auto; }
.log-clr:hover { color:var(--red); }
.tx-log-pane { padding:10px 20px; max-height:260px; overflow-y:auto; font-size:12px; }
.tx-log-pane::-webkit-scrollbar       { width:3px; }
.tx-log-pane::-webkit-scrollbar-thumb { background:var(--border); }
.log-date-sep { font-size:9px; text-transform:uppercase; letter-spacing:2px; color:var(--muted2);
                padding:8px 0 4px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.hash-copy:hover { color:var(--accent); }
.le  { padding:5px 0; border-bottom:1px solid rgba(128,128,128,.05); display:flex; gap:10px; align-items:flex-start; animation:fi .22s ease; }
.lt  { color:var(--muted); flex-shrink:0; width:58px; }
.lk  { flex-shrink:0; width:72px; }
.lk.info    { color:var(--accent); }
.lk.success { color:var(--green); }
.lk.error   { color:var(--red); }
.lk.pending { color:var(--accent3); }
.lm  { color:var(--text); word-break:break-all; flex:1; line-height:1.7; }
.lm a        { color:var(--accent); text-decoration:none; }
.lm a:hover  { text-decoration:underline; }
@keyframes fi { from{opacity:0;transform:translateX(-4px)} to{opacity:1;transform:none} }

/* ── MODALS ── */
.ov { display:none; position:fixed; inset:0; z-index:200; background:rgba(5,8,16,.88); backdrop-filter:blur(8px); align-items:center; justify-content:center; }
[data-theme="light"] .ov { background:rgba(220,230,248,.85); }
.ov.show { display:flex; }
@keyframes su { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* Modal wallet */
.wmod       { background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:28px; width:90%; max-width:390px; animation:su .2s ease; position:relative; }
.wmod-title { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; color:var(--text); margin-bottom:4px; }
.wmod-sub   { font-size:11px; color:var(--muted); margin-bottom:22px; }
.wmod-close { position:absolute; top:16px; right:16px; background:none; border:none; color:var(--muted); font-size:19px; cursor:pointer; }
.wmod-close:hover { color:var(--text); }
.wlist { display:flex; flex-direction:column; gap:10px; }
.wi {
  background:var(--bg3); border:1px solid var(--border); border-radius:10px;
  padding:13px 16px; cursor:pointer; display:flex; align-items:center; gap:13px;
  transition:all .16s; color:var(--text); font-family:'Space Mono',monospace;
}
.wi:hover   { border-color:var(--accent); background:rgba(0,229,255,.04); transform:translateX(2px); }
.wi.wactive { border-color:var(--green); background:rgba(0,255,136,.04); }
.wicon { width:38px; height:38px; border-radius:10px; background:rgba(128,128,128,.08); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; overflow:hidden; }
.wicon img { width:26px; height:26px; border-radius:5px; object-fit:contain; }
.wbody  { flex:1; min-width:0; }
.wname  { font-size:13px; font-weight:700; color:var(--text); }
.wtag   { font-size:10px; color:var(--muted); margin-top:2px; }
.warr   { color:var(--muted); font-size:14px; transition:transform .18s; }
.wi:hover .warr { transform:translateX(3px); color:var(--accent); }

/* Modal action (Send Tx) */
.amod       { background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:28px; width:90%; max-width:420px; position:relative; animation:su .2s ease; }
.amod-title { font-family:'Syne',sans-serif; font-size:19px; font-weight:800; color:var(--text); margin-bottom:6px; }
.amod-sub   { font-size:11px; color:var(--muted); margin-bottom:22px; line-height:1.7; }
.amod-close { position:absolute; top:15px; right:15px; background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; }
.amod-close:hover { color:var(--text); }
.ig    { margin-bottom:14px; }
.il    { display:block; font-size:10px; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-bottom:7px; }
.ifield {
  width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  padding:10px 13px; color:var(--text); font-family:'Space Mono',monospace; font-size:12px; transition:border-color .18s;
}
.ifield:focus        { outline:none; border-color:var(--accent); }
.ifield::placeholder { color:var(--muted); }
.brow { display:flex; gap:8px; margin-top:18px; }
.btn  { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 22px; border-radius:7px; border:none; cursor:pointer; font-family:'Space Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; transition:all .18s; }
.btn-p { background:var(--accent); color:var(--bg); box-shadow:0 0 16px rgba(0,229,255,.2); }
.btn-p:hover { box-shadow:0 0 28px rgba(0,229,255,.42); transform:translateY(-1px); }
.btn-g { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn-g:hover { color:var(--text); border-color:var(--muted); }

/* ── SUCCESS MODAL ── */
.smod       { background:var(--bg2); border:1px solid var(--border2); border-radius:18px; padding:32px 28px 24px; width:92%; max-width:420px; position:relative; animation:su .22s cubic-bezier(.34,1.3,.64,1); }
.smod-icon  { font-size:44px; text-align:center; margin-bottom:14px; line-height:1; }
.smod-title { font-family:'Syne',sans-serif; font-size:19px; font-weight:800; color:var(--green); text-align:center; margin-bottom:6px; line-height:1.35; }
.smod-divider { height:1px; background:var(--border); margin:0 -28px 20px; }
.smod-tx    { background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:20px; }
.smod-tx-label { font-size:9px; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-bottom:6px; }
.smod-tx-hash  { font-size:13px; color:var(--accent); word-break:break-all; line-height:1.5; }
.smod-tx-hash a        { color:var(--accent); text-decoration:none; }
.smod-tx-hash a:hover  { text-decoration:underline; }
.smod-btns { display:flex; flex-direction:column; gap:9px; }
.smod-btn-exp {
  background:transparent; color:var(--accent); border:1px solid var(--accent);
  border-radius:8px; padding:10px 18px; font-family:'Space Mono',monospace; font-size:11px;
  font-weight:700; cursor:pointer; letter-spacing:.6px; text-transform:uppercase;
  transition:all .17s; display:flex; align-items:center; justify-content:center; gap:7px; text-decoration:none;
}
.smod-btn-exp:hover { background:rgba(0,229,255,.07); transform:translateY(-1px); }
[data-theme="light"] .smod-btn-exp { color:var(--accent); border-color:var(--accent); }
.smod-btn-share {
  background:#000; color:#fff; border:none; border-radius:8px;
  padding:10px 18px; font-family:'Space Mono',monospace; font-size:11px; font-weight:700;
  cursor:pointer; letter-spacing:.6px; text-transform:uppercase; transition:all .17s;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.smod-btn-share:hover { background:#1a1a1a; transform:translateY(-1px); }
[data-theme="light"] .smod-btn-share       { background:#111; }
[data-theme="light"] .smod-btn-share:hover { background:#333; }
.smod-btn-close {
  background:transparent; color:var(--muted); border:1px solid var(--border);
  border-radius:8px; padding:9px 18px; font-family:'Space Mono',monospace; font-size:11px;
  cursor:pointer; letter-spacing:.6px; text-transform:uppercase; transition:all .17s;
  display:flex; align-items:center; justify-content:center;
}
.smod-btn-close:hover { color:var(--text); border-color:var(--muted); }
.smod-close-x {
  position:absolute; top:14px; right:14px; background:none; border:none;
  color:var(--muted); font-size:19px; cursor:pointer; line-height:1; padding:2px 5px; transition:color .15s;
}
.smod-close-x:hover { color:var(--text); }

/* ── RESPONSIVE ── */
@media(max-width:600px) {
  nav { padding:0 14px; }
  .wrap { padding:28px 12px 60px; }
  .chain-grid { grid-template-columns:1fr 1fr; }
  .acct-drop  { right:12px; width:calc(100vw - 24px); }
}

/* ── FOOTER ── */
.site-footer {
  margin-top:44px; padding:24px 20px 16px;
  text-align:center; border-top:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.footer-main {
  font-size:13px; color:var(--muted); letter-spacing:.3px;
}
.footer-disclaimer {
  font-size:12px; color:#fff; line-height:1.75;
  max-width:620px; width:100%;
  background:rgba(180,40,40,.82); border:2px solid rgba(220,60,60,.7);
  border-radius:10px; padding:12px 22px;
  font-weight:700; letter-spacing:.2px;
  box-shadow:0 0 18px rgba(200,40,40,.25);
}
[data-theme="light"] .footer-disclaimer {
  background:rgba(180,40,40,.88); border-color:rgba(200,60,60,.8);
  color:#fff;
}
.footer-contact {
  font-size:13px; color:var(--muted); font-family:'Space Mono', monospace;
}
.footer-x {
  color:var(--accent); text-decoration:none; font-weight:700;
  font-family:'Space Mono', monospace; font-size:13px; letter-spacing:.3px;
  font-style:normal;
}
.footer-x:hover { text-decoration:underline; opacity:.85; }
.footer-handle {
  font-family:'Space Mono', monospace; font-style:normal; font-weight:700;
  font-variant-ligatures:none; -webkit-font-smoothing:antialiased;
}