/* --------------------------------------------------------------------------
   The signed-in skin: light, and deliberately continuous with the desktop
   launcher -- same greys, same 8px radius, same 38px control height -- so the
   dashboard reads as part of DHARA rather than as a separate web product.
   -------------------------------------------------------------------------- */

body.app {
  background:
    radial-gradient(900px 420px at 88% -8%, rgba(23, 127, 143, .09), transparent 60%),
    radial-gradient(700px 380px at 4% 2%,  rgba(243, 111, 33, .07), transparent 55%),
    var(--page);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* ==========================================================================
   Header
   ========================================================================== */

.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur-2) ease;
}
.topbar.stuck { box-shadow: var(--shadow-2); }
.topbar-in {
  max-width: 1180px; margin: 0 auto;
  padding: 10px var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4);
}
.topbar .logo { height: 34px; width: auto; }
.topbar .product {
  padding-left: 13px; margin-left: 3px;
  border-left: 1px solid var(--border);
  font-weight: 700; font-size: var(--t-sm); letter-spacing: .2em;
  color: var(--teal); text-transform: uppercase;
}

.nav { display: flex; gap: 2px; margin-left: var(--sp-5); }
.nav a {
  position: relative;
  padding: 8px 13px; border-radius: var(--r-sm);
  color: var(--label); font-size: var(--t-md); font-weight: 500;
  transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.nav a:hover { background: var(--border-soft); color: var(--ink); text-decoration: none; }
.nav a.on { color: var(--primary); font-weight: 600; }
.nav a.on::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--primary);
  animation: nav-underline var(--dur-3) var(--e-out);
}
@keyframes nav-underline { from { transform: scaleX(0); } }

.who { margin-left: auto; position: relative; }
.who-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 11px 5px 5px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--card); cursor: pointer;
  font-size: var(--t-sm); color: var(--label);
  transition: box-shadow var(--dur-2) var(--e-out), border-color var(--dur-1) ease;
}
.who-btn:hover { border-color: var(--teal-300); box-shadow: var(--shadow-2); }
.avatar {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-600));
  color: #fff; font-weight: 700; font-size: var(--t-sm);
}
.menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 230px; padding: 6px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-3);
  animation: pop-in var(--dur-2) var(--e-out);
}
.menu .head { padding: 9px 11px 11px; border-bottom: 1px solid var(--border-soft); margin-bottom: 5px; }
.menu .head b { display: block; font-size: var(--t-sm); }
.menu .head span { font-size: var(--t-xs); color: var(--muted); word-break: break-all; }
.menu button, .menu a {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: 6px;
  background: none; color: var(--label); font-size: var(--t-sm);
  text-align: left; cursor: pointer;
}
.menu button:hover, .menu a:hover { background: var(--border-soft); color: var(--ink); text-decoration: none; }

/* Hamburger, small screens only. */
.burger { display: none; margin-left: auto; }
@media (max-width: 820px) {
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; margin: 0; padding: var(--sp-3);
    background: var(--card); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-3);
  }
  .nav:not(.open) { display: none; }
  .nav a.on::after { display: none; }
  .burger { display: inline-flex; }
  .who { margin-left: var(--sp-2); }
  .who-btn .email { display: none; }
}

/* ==========================================================================
   Page shell
   ========================================================================== */

main { flex: 1 0 auto; }
.wrap-page { max-width: 1180px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); }

.page-head { margin-bottom: var(--sp-5); }
.page-head h1 {
  font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.03em;
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.page-head p { color: var(--muted); margin-top: 6px; }

.sec-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-4);
}
.sec-head h2 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; }
.sec-head .count {
  padding: 1px 9px; border-radius: var(--r-pill);
  background: var(--border-soft); color: var(--muted);
  font-size: var(--t-xs); font-weight: 700;
}
.sec-head .rule { flex: 1; height: 1px; background: var(--border); }

/* ==========================================================================
   Promotion banner
   ========================================================================== */

.promo {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  border: 1px solid rgba(243, 111, 33, .35);
  border-radius: var(--r-md);
  background: linear-gradient(100deg, #fff5ee, #eaf6f8 60%, #fff);
  box-shadow: var(--shadow-1);
}
.promo::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--orange), var(--teal));
}
.promo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.75) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: shimmer 6s var(--e-in-out) infinite;
}
.promo .gift {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--orange), #ff9d5c);
  color: #fff;
  box-shadow: 0 6px 16px rgba(243, 111, 33, .32);
  animation: nudge 4s var(--e-in-out) infinite;
}
@keyframes nudge {
  0%, 88%, 100% { transform: none; }
  92% { transform: rotate(-9deg) scale(1.06); }
  96% { transform: rotate(7deg) scale(1.06); }
}
.promo .txt { flex: 1 1 260px; min-width: 0; }
.promo .txt b { font-size: var(--t-lg); }
.promo .txt p { color: var(--label); font-size: var(--t-sm); }
.promo .act { display: flex; align-items: center; gap: var(--sp-2); position: relative; z-index: 1; }
.promo .code-in {
  width: 158px; height: 38px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--card);
  font-family: var(--mono); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
}
.promo .code-in:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(243, 111, 33, .16);
}
.promo .dismiss { position: absolute; right: 8px; top: 8px; z-index: 1; }

/* ==========================================================================
   Licence key
   ========================================================================== */

.key-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: linear-gradient(115deg, #0d2b33, #123f49 45%, #0f333c);
  color: #e8f0f2;
  box-shadow: var(--shadow-3);
}
/* Slow specular sweep, so the panel is not a flat rectangle. */
.key-card::after {
  content: ""; position: absolute; top: -60%; left: -30%;
  width: 55%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transform: rotate(18deg);
  animation: key-sweep 9s var(--e-in-out) infinite;
}
@keyframes key-sweep { 0%, 60% { left: -40%; } 100% { left: 120%; } }

.key-card .lab {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .16em;
  color: #8fb6bd; margin-bottom: 8px;
}
.key-card .val {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  position: relative; z-index: 1;
}
.key-card code {
  font-family: var(--mono);
  font-size: clamp(1rem, 3.4vw, 1.5rem);
  font-weight: 700; letter-spacing: .1em;
  word-break: break-all;
}
.key-card code.masked { color: #6f959d; }
.key-card .note { font-size: var(--t-sm); color: #9fc3ca; margin-top: 10px; max-width: 54ch; }
.key-card .btn-light {
  --btn-bg: rgba(255,255,255,.1); --btn-bg-hover: rgba(255,255,255,.18);
  --btn-fg: #fff; --btn-border: rgba(255,255,255,.16);
}
.key-status { position: relative; z-index: 1; margin-left: auto; text-align: right; }

/* Copy button flips to a tick and back. */
.copied .ico-copy { display: none; }
.ico-check { display: none; }
.copied .ico-check { display: block; animation: pop-in var(--dur-2) var(--e-spring); }

/* ==========================================================================
   Module cards
   ========================================================================== */

.mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 1080px) { .mods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .mods { grid-template-columns: 1fr; } }

.mod {
  --accent: var(--primary);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-3) var(--e-out),
              box-shadow var(--dur-3) var(--e-out),
              border-color var(--dur-2) ease;
}
.mod::before {                      /* accent cap */
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, #fff));
  transform: scaleX(.35); transform-origin: left;
  transition: transform var(--dur-3) var(--e-out);
}
.mod:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.mod:hover::before { transform: scaleX(1); }
/* Faint wash that follows the accent, revealed on hover. */
.mod::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(340px 150px at 82% -14%,
              color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--dur-3) ease;
}
.mod:hover::after { opacity: 1; }

.mod > * { position: relative; z-index: 1; }

.mod .glyph {
  width: 46px; height: 46px; margin-bottom: var(--sp-3);
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--accent);
  transition: transform var(--dur-3) var(--e-spring);
}
.mod:hover .glyph { transform: scale(1.08) rotate(-4deg); }
.mod:not(.on) .glyph { background: var(--border-soft); color: var(--disabled); }

.mod h3 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em; }
.mod .blurb {
  font-size: var(--t-sm); color: var(--muted);
  margin: 6px 0 var(--sp-3); min-height: 3.1em;
}
.mod .params { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--sp-4); }
.mod .params span {
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--border-soft); color: var(--label);
  font-size: 11px;
}
.mod .foot { margin-top: auto; }

/* Expiry: a bar that empties as the term runs down. */
.expiry { margin-bottom: var(--sp-3); }
.expiry .line { display: flex; justify-content: space-between; font-size: var(--t-xs); margin-bottom: 5px; }
.expiry .track { height: 5px; border-radius: 3px; background: var(--border-soft); overflow: hidden; }
/* The width is set inline at render, so the resting state is right with no JS
   running; the sweep is a CSS animation on the transform, which cannot leave
   the bar stuck at zero if a frame callback never arrives. */
.expiry .fill {
  height: 100%; border-radius: 3px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff));
  animation: fill-in var(--dur-4) var(--e-out) both;
}
@keyframes fill-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.expiry.soon .fill { background: linear-gradient(90deg, var(--amber), #ffd970); }
.expiry.gone .fill { background: var(--danger); }

.mod.on  { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }
.mod:not(.on) h3 { color: var(--label); }

/* ==========================================================================
   Info cards (device / account / orders)
   ========================================================================== */

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

.kv { display: grid; grid-template-columns: 148px 1fr; gap: 10px var(--sp-4); }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; gap: 2px var(--sp-4); } }
.kv dt { color: var(--muted); font-size: var(--t-sm); }
.kv dd { margin: 0; font-size: var(--t-md); word-break: break-word; }

.empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: var(--sp-6) var(--sp-4);
  text-align: center; color: var(--muted);
}
.empty .ring {
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 50%; background: var(--border-soft); color: var(--disabled);
}

table.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.tbl th {
  text-align: left; font-weight: 600; color: var(--muted); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 0 var(--sp-3) 9px; border-bottom: 1px solid var(--border);
}
table.tbl td { padding: 12px var(--sp-3); border-bottom: 1px solid var(--border-soft); }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr { transition: background var(--dur-1) ease; }
table.tbl tbody tr:hover { background: var(--header); }
.tbl-scroll { overflow-x: auto; }

/* Editable holder name */
.inline-edit { display: flex; gap: var(--sp-2); align-items: flex-start; }
.inline-edit input {
  flex: 1; min-height: 38px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card);
}
.inline-edit input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);
}

.callout {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}
.callout-warn { background: var(--amber-100); border: 1px solid #ffe69c; color: #664d03; }
.callout-info { background: var(--primary-100); border: 1px solid #cfe2ff; color: #084298; }
.callout-note { background: var(--header); border: 1px solid var(--border); color: var(--label); }
.callout .ico { flex: none; margin-top: 1px; }

/* ==========================================================================
   Purchase modal
   ========================================================================== */

.pick {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 13px var(--sp-4); margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur-1) ease, background var(--dur-1) ease,
              transform var(--dur-2) var(--e-spring);
}
.pick:hover { border-color: var(--teal-300); background: var(--header); }
.pick:has(input:checked) {
  border-color: var(--teal); background: var(--teal-100);
}
.pick:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.pick input { width: 18px; height: 18px; accent-color: var(--teal); flex: none; }
.pick .nm { font-weight: 600; }
.pick .amt { margin-left: auto; font-family: var(--mono); font-size: var(--t-sm); }

.total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--sp-4) 0 0; margin-top: var(--sp-3);
  border-top: 1px dashed var(--border);
}
.total b { font-size: var(--t-xl); font-family: var(--mono); }

/* ==========================================================================
   Downloads / support pages
   ========================================================================== */

.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 760px) { .dl-grid { grid-template-columns: 1fr; } }

.dl {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-5);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-1);
  transition: transform var(--dur-3) var(--e-out), box-shadow var(--dur-3) var(--e-out);
}
.dl:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.dl .os {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--header);
  border: 1px solid var(--border); color: var(--teal);
}
.dl h3 { font-size: var(--t-lg); font-weight: 700; }

.steps { counter-reset: s; }
.steps li {
  position: relative; counter-increment: s;
  padding: 0 0 var(--sp-5) var(--sp-6);
  border-left: 2px solid var(--border-soft);
  margin-left: 15px;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(s);
  position: absolute; left: -16px; top: -3px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--card);
  border: 2px solid var(--teal); color: var(--teal);
  font-size: var(--t-sm); font-weight: 700;
}
.steps li b { display: block; margin-bottom: 3px; }
.steps li p { color: var(--muted); font-size: var(--t-sm); }

.prose { max-width: 74ch; }
.prose h2 { font-size: var(--t-xl); font-weight: 700; margin: var(--sp-6) 0 var(--sp-3); letter-spacing: -.02em; }
.prose h3 { font-size: var(--t-lg); font-weight: 700; margin: var(--sp-5) 0 var(--sp-2); }
.prose p, .prose li { color: var(--label); margin-bottom: var(--sp-3); }
.prose ul { list-style: disc; padding-left: var(--sp-5); }
.prose li { margin-bottom: 6px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  flex: none;
  border-top: 1px solid var(--border);
  background: var(--card);
}
.foot-in {
  max-width: 1180px; margin: 0 auto; padding: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  align-items: center; justify-content: space-between;
  color: var(--muted); font-size: var(--t-sm);
}
.foot-in nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.foot-in a { color: var(--muted); }
.foot-in a:hover { color: var(--ink); }

/* ==========================================================================
   Mock-only developer panel. Never rendered when CONFIG.USE_MOCK is false.
   ========================================================================== */

.devbar {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: 250px;
  border: 1px solid #6c757d; border-radius: var(--r-md);
  background: #212b36; color: #dee2e6;
  box-shadow: var(--shadow-4);
  font-size: var(--t-sm);
  overflow: hidden;
}
.devbar summary {
  padding: 9px 13px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
  background: #2b3743; font-weight: 600;
}
.devbar summary::-webkit-details-marker { display: none; }
.devbar .body { padding: 11px 13px; display: grid; gap: 7px; }
.devbar button {
  width: 100%; padding: 7px 11px; text-align: left;
  border: 1px solid #495057; border-radius: 6px;
  background: #2b3743; color: #dee2e6; cursor: pointer; font-size: var(--t-xs);
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.devbar button:hover { background: #3a4a58; border-color: #6c757d; }
.devbar .hr { height: 1px; background: #495057; margin: 3px 0; }
.devbar .cap { color: #adb5bd; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
@media (max-width: 560px) { .devbar { display: none; } }