/* ==========================================================================
   ETCO Digital Cards — Rich tactile skeuomorphism, refined.
   Materials: anodized navy plate · white enamel · ceramic keys · milled wells.
   Everything is scoped under .ec so the admin preview can reuse it safely.
   ========================================================================== */
:root {
  --blue: #2a7de1;
  --blue-d: #1559b8;
  --blue-dd: #0e3f86;
  --orange: #f18a00;
  --orange-d: #c46d00;
  --ink: #101b2f;
  --ink-2: #3a4a66;
  --ink-3: #6b7d99;
  --ink-4: #93a3bb;
  --paper: #fbfcfe;
  --paper-2: #f1f4f9;
  --edge: #d3dbe7;
  --edge-d: #b7c3d4;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --font: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.page {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 600px at 50% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #e8edf4 0%, #d9e1ec 100%);
  display: flex;
  justify-content: center;
  padding: clamp(14px, 4vw, 40px) 14px 56px;
  position: relative;
}
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.07;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.ec { width: 100%; max-width: 440px; position: relative; font-family: var(--font); color: var(--ink); }
.ec .ic { width: 20px; height: 20px; flex: none; }

/* ---------- Card body ---------- */
.ec .card {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
  border-radius: 32px;
  border: 1px solid #cdd7e5;
  overflow: hidden;
  box-shadow:
    0 1px 0 #fff inset,
    0 -1px 0 rgba(16, 27, 47, 0.06) inset,
    0 2px 4px rgba(16, 27, 47, 0.05),
    0 14px 26px -8px rgba(16, 27, 47, 0.16),
    0 40px 70px -24px rgba(16, 27, 47, 0.28);
  animation: rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } }

/* ---------- Anodized plate header ---------- */
.ec .plate {
  position: relative;
  padding: 18px 18px 78px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    radial-gradient(120% 90% at 85% -10%, rgba(42, 125, 225, 0.45) 0%, rgba(42, 125, 225, 0) 60%),
    linear-gradient(180deg, #1a2d57 0%, #0e1a36 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 -3px 0 var(--orange) inset, 0 6px 14px rgba(8, 16, 36, 0.35);
}
.ec .plate-bar { display: flex; justify-content: space-between; gap: 10px; }
.ec .chip-btn {
  appearance: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  font: 700 12.5px/1 var(--font);
  color: #fff;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06));
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 6px 10px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s, box-shadow 0.12s;
}
.ec .chip-btn .ic { width: 15px; height: 15px; }
.ec .chip-btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 2px 5px rgba(0, 0, 0, 0.5) inset; }

.ec .enamel {
  margin: 20px auto 0;
  width: min(250px, 72%);
  height: 64px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #ffffff, #eef2f8);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35), 0 2px 3px rgba(0, 0, 0, 0.2), 0 -2px 3px rgba(16, 27, 47, 0.1) inset, 0 2px 0 #fff inset;
}
.ec .enamel img { max-width: 86%; max-height: 44px; object-fit: contain; display: block; }

/* ---------- Identity ---------- */
.ec .who { position: relative; text-align: center; padding: 0 22px 6px; margin-top: -58px; }
.ec .portrait { position: relative; width: 124px; height: 124px; margin: 0 auto 14px; }
.ec .bezel {
  width: 100%; height: 100%;
  border-radius: 50%;
  padding: 5px;
  background: linear-gradient(145deg, #ffffff, #dfe6f1);
  box-shadow: 0 14px 26px -6px rgba(16, 27, 47, 0.45), 0 3px 6px rgba(16, 27, 47, 0.18), 0 2px 2px #fff inset, 0 -2px 4px rgba(16, 27, 47, 0.18) inset;
}
.ec .bezel img {
  width: 100%; height: 100%; display: block;
  border-radius: 50%; object-fit: cover; background: #fff;
  box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(16, 27, 47, 0.35) inset;
}
.ec .seal {
  position: absolute; inset-inline-end: 2px; bottom: 4px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 32% 28%, #6bb2ff 0%, #2a7de1 55%, #0f4aa0 100%);
  border: 3px solid #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.9) inset, 0 -2px 3px rgba(0, 0, 0, 0.3) inset;
}
.ec .seal .ic { width: 16px; height: 16px; stroke-width: 3; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }

.ec h1 { font-size: clamp(21px, 6vw, 25px); line-height: 1.22; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; text-shadow: 0 1px 0 #fff; }
.ec h1.is-role { font-size: clamp(18px, 5vw, 21px); line-height: 1.3; letter-spacing: -0.01em; }
.ec .role { margin-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-wrap: balance; }
.ec .dept {
  display: inline-block; margin-top: 12px; padding: 6px 14px;
  font-size: 12px; font-weight: 700; color: #a85a00;
  background: linear-gradient(180deg, #fff8ee, #ffeccf);
  border: 1px solid #f7d29b; border-top-color: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(241, 138, 0, 0.18), 0 1px 0 #fff inset;
}

/* ---------- Actions ---------- */
.ec .actions { padding: 22px 18px 4px; }
.ec .key-primary {
  appearance: none; width: 100%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 20px; border-radius: 20px;
  font: 800 16.5px/1 var(--font); color: #fff; letter-spacing: 0.01em;
  background: linear-gradient(180deg, #4a9bff 0%, #2679e6 46%, #1a63cc 54%, #1250a8 100%);
  border: 1px solid #0f4592; border-top-color: #8cc1ff; border-bottom-color: #0a3270;
  box-shadow: 0 5px 0 #0b3a7c, 0 12px 20px -4px rgba(14, 80, 171, 0.55), 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 -2px 4px rgba(0, 0, 0, 0.22) inset;
  text-shadow: 0 -1px 1px rgba(7, 38, 86, 0.65);
  transition: transform 0.1s, box-shadow 0.1s, filter 0.15s;
}
.ec .key-primary:hover { filter: brightness(1.06); }
.ec .key-primary:active { transform: translateY(5px); box-shadow: 0 0 0 #0b3a7c, 0 2px 3px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.4) inset; }
.ec .key-primary.sm { padding: 13px 16px; font-size: 14.5px; border-radius: 16px; box-shadow: 0 4px 0 #0b3a7c, 0 10px 16px -4px rgba(14, 80, 171, 0.5), 0 1px 0 rgba(255, 255, 255, 0.6) inset; }

.ec .keys {
  margin-top: 20px; padding: 10px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px;
  background: #e9eef6; border-radius: 24px; border: 1px solid #d3dbe7;
  box-shadow: 0 3px 7px rgba(16, 27, 47, 0.1) inset, 0 1px 0 #fff;
}
.ec .key {
  appearance: none; text-decoration: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 11px 2px 9px; border-radius: 17px; color: var(--ink-2);
  font: 700 11.5px/1 var(--font);
  background: linear-gradient(180deg, #ffffff, #f2f5fa);
  border: 1px solid #d3dbe7; border-top-color: #fff; border-bottom-color: #bcc8d9;
  box-shadow: 0 3px 0 #bcc8d9, 0 7px 10px rgba(16, 27, 47, 0.08), 0 1px 0 #fff inset;
  transition: transform 0.1s, box-shadow 0.1s;
}
.ec .key:active { transform: translateY(3px); box-shadow: 0 0 0 #bcc8d9, 0 2px 5px rgba(16, 27, 47, 0.18) inset; }
.ec .coin {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 7px rgba(16, 27, 47, 0.3), 0 1px 1px rgba(255, 255, 255, 0.75) inset, 0 -2px 3px rgba(0, 0, 0, 0.28) inset;
}
.ec .coin .ic { width: 19px; height: 19px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.ec .c-green { background: radial-gradient(circle at 32% 28%, #44e0a3, #12b981 55%, #05775a); }
.ec .c-wa { background: radial-gradient(circle at 32% 28%, #66f09a, #25d366 55%, #0f8a78); }
.ec .c-blue { background: radial-gradient(circle at 32% 28%, #6bb2ff, #2a7de1 55%, #1559b8); }
.ec .c-orange { background: radial-gradient(circle at 32% 28%, #ffcf6b, #f59e0b 55%, #b45309); }

/* ---------- Info well ---------- */
.ec .well {
  list-style: none; margin: 22px 18px 0; padding: 10px;
  display: grid; gap: 9px;
  background: #e9eef6; border-radius: 24px; border: 1px solid #d3dbe7;
  box-shadow: 0 3px 8px rgba(16, 27, 47, 0.1) inset, 0 1px 0 #fff;
}
.ec .row {
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, #ffffff, #f9fbfd);
  border-radius: 16px; border: 1px solid #d8e0ec; border-bottom-color: #c4cfde;
  box-shadow: 0 2px 5px rgba(16, 27, 47, 0.06), 0 1px 0 #fff inset;
}
.ec .row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 13px; padding: 12px 14px; color: inherit; text-decoration: none; border-radius: 16px; }
.ec .row-main[href]:active { background: #f1f5fb; }
.ec .row-ic {
  width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--blue);
  background: linear-gradient(180deg, #f0f5fc, #e0e9f5); border: 1px solid #c9d7ea; border-top-color: #fff;
  box-shadow: 0 1px 2px rgba(16, 27, 47, 0.08), 0 1px 0 #fff inset;
}
.ec .row-ic .ic { width: 18px; height: 18px; }
.ec .row-tx { min-width: 0; display: grid; gap: 2px; }
.ec .row-tx small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-4); }
.ec .row-tx b { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.ec [dir="ltr"] { unicode-bidi: plaintext; text-align: start; }
.ec .row-copy {
  appearance: none; cursor: pointer; align-self: center; margin-inline-end: 10px;
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-3);
  background: linear-gradient(180deg, #fff, #eef2f8); border: 1px solid #cdd7e5; border-bottom-color: #b3c0d3;
  box-shadow: 0 2px 0 #b3c0d3, 0 1px 0 #fff inset; transition: transform 0.1s, box-shadow 0.1s, color 0.15s;
}
.ec .row-copy .ic { width: 15px; height: 15px; }
.ec .row-copy:hover { color: var(--blue); }
.ec .row-copy:active { transform: translateY(2px); box-shadow: 0 0 0 #b3c0d3, 0 2px 4px rgba(16, 27, 47, 0.2) inset; }

/* ---------- About / footer ---------- */
.ec .about {
  margin: 20px 18px 0; padding: 14px 16px; border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f8fafd); border: 1px solid #d8e0ec;
  border-inline-start: 5px solid var(--orange);
  box-shadow: 0 2px 6px rgba(16, 27, 47, 0.05), 0 1px 0 #fff inset;
}
.ec .about small { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-4); margin-bottom: 4px; }
.ec .about p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); font-weight: 500; }
.ec .foot { margin: 22px 18px 22px; padding-top: 16px; border-top: 1px solid #dbe3ee; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--ink-4); }

/* ---------- QR sheet ---------- */
.ec .sheet {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px;
  background: rgba(14, 24, 44, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.2s;
}
.ec .sheet.open { opacity: 1; }
.ec .sheet-card {
  position: relative; width: min(100%, 380px); text-align: center; padding: 30px 22px 22px;
  background: linear-gradient(180deg, #fff, #eef2f8); border-radius: 30px; border: 1px solid #cdd7e5;
  box-shadow: 0 30px 70px -14px rgba(8, 16, 36, 0.6), 0 1px 0 #fff inset;
  transform: translateY(18px) scale(0.97); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ec .sheet.open .sheet-card { transform: none; }
.ec .sheet-x {
  appearance: none; position: absolute; top: 12px; inset-inline-end: 12px; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2);
  background: linear-gradient(180deg, #fff, #e6ecf5); border: 1px solid #c9d4e3; border-bottom-color: #aebbd0;
  box-shadow: 0 2px 0 #aebbd0, 0 1px 0 #fff inset;
}
.ec .sheet-x:active { transform: translateY(2px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) inset; }
.ec .sheet-card h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; padding-inline: 34px; }
.ec .sheet-card > p { margin: 4px 0 16px; font-size: 13px; color: var(--ink-3); font-weight: 500; }
.ec .themes { display: flex; justify-content: center; gap: 6px; padding: 5px; margin-bottom: 16px; background: #e3e9f3; border-radius: 999px; box-shadow: 0 2px 5px rgba(16, 27, 47, 0.12) inset, 0 1px 0 #fff; }
.ec .theme {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px;
  font: 700 11.5px/1 var(--font); color: var(--ink-2);
  background: linear-gradient(180deg, #fff, #f1f4f9); border: 1px solid #d0d9e6; border-bottom-color: #b6c3d5;
  box-shadow: 0 2px 0 #b6c3d5, 0 1px 0 #fff inset; transition: transform 0.1s, box-shadow 0.1s;
}
.ec .theme.on { transform: translateY(2px); background: linear-gradient(180deg, #dbe5f3, #cbd9ec); color: var(--blue-d); box-shadow: 0 2px 4px rgba(16, 27, 47, 0.22) inset; }
.ec .sw { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; }
.ec .sw-classic { background: linear-gradient(135deg, #2a7de1, #1559b8); }
.ec .sw-power { background: linear-gradient(135deg, #0b2f6b, #2a7de1 60%, #f18a00); }
.ec .sw-solar { background: linear-gradient(135deg, #9a3412, #f59e0b); }
.ec .sw-shield { background: linear-gradient(135deg, #0c1f4a, #0d9488); }
.ec .qr-well {
  display: inline-block; padding: 14px; border-radius: 24px; background: #fff; border: 2px solid #dbe4ef;
  box-shadow: 0 4px 10px rgba(16, 27, 47, 0.12) inset, 0 1px 0 #fff;
}
.ec .qr-well canvas { width: 224px; height: 224px; display: block; border-radius: 10px; }
.ec .sheet-actions { display: grid; gap: 12px; margin-top: 20px; }
.ec .key-ghost {
  appearance: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 16px; border-radius: 16px;
  font: 800 14.5px/1 var(--font); color: var(--ink);
  background: linear-gradient(180deg, #fff, #f0f3f9); border: 1px solid #cbd5e3; border-top-color: #fff; border-bottom-color: #b3c0d3;
  box-shadow: 0 4px 0 #b3c0d3, 0 1px 0 #fff inset; transition: transform 0.1s, box-shadow 0.1s;
}
.ec .key-ghost:active { transform: translateY(4px); box-shadow: 0 0 0 #b3c0d3, 0 2px 5px rgba(16, 27, 47, 0.2) inset; }

/* ---------- Toast ---------- */
.ec .toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 60; transform: translate(-50%, 90px); opacity: 0; pointer-events: none;
  padding: 11px 20px; border-radius: 999px; font: 700 13px/1 var(--font); color: #fff;
  background: linear-gradient(180deg, #24344f, #0f1a2e); border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s; white-space: nowrap;
}
.ec .toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Not-found / landing ---------- */
.notice { width: 100%; max-width: 420px; align-self: center; text-align: center; padding: 34px 26px; font-family: var(--font); color: var(--ink);
  background: linear-gradient(180deg, #fff, #f3f6fb); border-radius: 30px; border: 1px solid #cdd7e5;
  box-shadow: 0 1px 0 #fff inset, 0 30px 60px -22px rgba(16, 27, 47, 0.3); }
.notice .enamel-lite { display: inline-grid; place-items: center; height: 60px; padding: 0 22px; margin-bottom: 20px; border-radius: 16px; background: #fff; border: 1px solid #d8e0ec; box-shadow: 0 6px 14px rgba(16, 27, 47, 0.12), 0 1px 0 #fff inset; }
.notice .enamel-lite img { height: 40px; }
.notice h1 { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.notice p { margin: 8px 0 22px; color: var(--ink-3); font-size: 14px; line-height: 1.6; }
.notice a.btn { display: inline-block; padding: 14px 26px; border-radius: 18px; font-weight: 800; font-size: 15px; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, #4a9bff, #1a63cc 54%, #1250a8); border: 1px solid #0f4592; border-top-color: #8cc1ff;
  box-shadow: 0 5px 0 #0b3a7c, 0 12px 18px -4px rgba(14, 80, 171, 0.5), 0 1px 0 rgba(255, 255, 255, 0.6) inset; text-shadow: 0 -1px 1px rgba(7, 38, 86, 0.6); }
.notice a.btn:active { transform: translateY(5px); box-shadow: 0 0 0 #0b3a7c, 0 3px 8px rgba(0, 0, 0, 0.4) inset; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 360px) { .ec .keys { gap: 6px; padding: 8px; } .ec .coin { width: 38px; height: 38px; } }