/* PenEcho Cloud console — the public site's quiet material, carried into the app.
   Loaded last on the Dashboard. It re-points the console (--paper/--ink/--blue…)
   and design-language (--pe-*) tokens, then refines the shell: a translucent
   sidebar, white cards on a soft gray canvas, bold titles and pill actions.
   Layout, markup and behaviour stay owned by console.css and the page modules. */
.console-body,
.console-body #view-projects {
  --paper:#f5f5f7; --paper-2:#ffffff; --paper-3:rgba(0,0,0,.045);
  --ink:#1d1d1f; --ink-2:#424245; --ink-soft:#6e6e73; --ink-faint:#86868b;
  --line:#e3e3e8; --line-soft:#ededf0; --line-strong:#c7c7cc;
  --blue:#0071e3; --blue-deep:#0058b9; --blue-soft:#4a9af0; --blue-wash:rgba(0,113,227,.09);
  --green:#1f8f4e; --amber:#b25000; --danger:#d70015; --maroon:#a1283a;
  --radius:18px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04); --shadow-md:0 1px 3px rgba(0,0,0,.06),0 8px 24px -16px rgba(0,0,0,.14); --shadow-lg:0 24px 60px -24px rgba(0,0,0,.28);
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --pe-font-ui:var(--font-ui);
  --pe-bg:#f5f5f7; --pe-surface:#ffffff; --pe-surface-raised:#fbfbfd; --pe-surface-muted:#f5f5f7; --pe-surface-pressed:#e8e8ed;
  --pe-ink:#1d1d1f; --pe-ink-2:#424245; --pe-ink-3:#6e6e73;
  --pe-line:rgba(0,0,0,.09); --pe-line-strong:rgba(0,0,0,.16); --pe-hover:rgba(0,0,0,.04);
  --pe-selected:#e8f1fc;
  --pe-accent:#0071e3; --pe-accent-strong:#0071e3; --pe-accent-label:#0066cc; --pe-accent-ink:#fff;
  --pe-accent-soft:rgba(0,113,227,.09); --pe-accent-focus:rgba(0,113,227,.28);
  --pe-danger:#d70015; --pe-danger-fill:#d70015; --pe-danger-soft:rgba(215,0,21,.07);
  --pe-success:#1f8f4e; --pe-success-soft:rgba(31,143,78,.09); --pe-warning:#b25000; --pe-warning-soft:rgba(178,80,0,.09);
  --pe-r-group:18px; --pe-r-popover:14px; --pe-r-dialog-s:18px; --pe-r-dialog:20px; --pe-r-dialog-l:22px;
  --pe-control-radius:8px;
  --pe-shadow-short:0 8px 24px -12px rgba(0,0,0,.22); --pe-shadow-dialog:0 30px 80px -20px rgba(0,0,0,.35);
  --pe-frost-control:rgba(255,255,255,.8); --pe-frost-popover:rgba(255,255,255,.94);
}
.console-body { background:var(--paper); color:var(--ink); font-family:var(--font-ui); letter-spacing:-.01em; -webkit-font-smoothing:antialiased; }
.console-body * { letter-spacing:inherit; }
.console-body ::selection { background:#b3d7ff; }

/* ---------- Shell ---------- */
.console-body .console-nav { padding:18px 12px 14px; background:rgba(255,255,255,.72); border-right:1px solid rgba(0,0,0,.07); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); }
.console-body .console-top { padding:2px 10px 10px; }
.console-body .console-top .brand { font-size:19px; font-weight:600; letter-spacing:-.035em; }
.console-body .console-top .brand img { filter:none; mix-blend-mode:normal; }
.console-body .env-tag { border:0; background:var(--paper); color:var(--ink-soft); font-weight:500; }
.console-body .console-nav-sections { gap:22px; }
.console-body .console-nav-heading { padding:0 12px; color:var(--ink-faint); font-size:11px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; }
.console-body .console-nav .console-nav-link,
.console-body .console-nav button[data-view] { min-height:40px; padding:8px 12px; border-radius:10px; color:var(--ink); font-size:14px; font-weight:450; }
.console-body .console-nav .console-nav-link:hover,
.console-body .console-nav button[data-view]:hover { background:rgba(0,0,0,.045); }
.console-body .console-nav .console-nav-link.on,
.console-body .console-nav button[data-view].on { background:rgba(0,113,227,.1); color:var(--blue); font-weight:600; }
.console-body .console-nav .console-nav-link svg,
.console-body .console-nav button[data-view] svg { opacity:.72; }
.console-body .console-nav-footer { border-top-color:rgba(0,0,0,.07); }
.console-body .console > main { padding:44px clamp(20px,4vw,64px) 96px; }

/* ---------- Page heads: large and quiet ---------- */
.console-body .console-head { margin-bottom:28px; }
.console-body .console-head h1,
.console-body .console-view:is(#view-settings,#view-billing,#view-devices,#view-feedback,#view-usage) .console-head h1,
.console-body #view-mcp .cloud-mcp-heading h2,
.console-body #view-dashboard .dh-header h1,
.console-body #view-projects .library-toolbar h1,
.console-body #view-usage .console-head h1 { font-family:var(--font-display); font-size:clamp(28px,2.6vw,34px); font-weight:700; letter-spacing:-.03em; line-height:1.15; color:var(--ink); }
.console-body .console-head p,
.console-body #view-mcp .cloud-mcp-heading p,
.console-body #view-dashboard .dh-header p,
.console-body #view-usage .console-head p { margin-top:8px; color:var(--ink-soft); font-size:15px; line-height:1.45; }
.console-body #view-dashboard h2,
.console-body .settings-section h2,
.console-body .section-toolbar h2 { font-size:19px; font-weight:700; letter-spacing:-.02em; }
.console-body .library-kicker { color:var(--ink-faint); font-weight:600; letter-spacing:.01em; }

/* ---------- Cards: white on the gray canvas, no hard borders ---------- */
.console-body #view-dashboard .dh-group,
.console-body #view-dashboard .dh-panel,
.console-body #view-dashboard .dh-empty,
.console-body #view-settings .panel,
.console-body .billing-balance-panel,
.console-body .usage-chart-panel,
.console-body .usage-ledger,
.console-body .feedback-inbox,
.console-body .feedback-compose { border-color:transparent; border-radius:18px; background:#fff; box-shadow:var(--shadow-sm),0 0 0 1px rgba(0,0,0,.04); }
.console-body #view-feedback .feedback-reward { border-color:#d9e7f9; background:#eff6ff; box-shadow:none; }
.console-body #view-usage :is(.usage-chart-panel,.usage-ledger) { padding:20px 22px; }
.console-body #view-dashboard .dh-panel { padding:22px; }
.console-body #view-dashboard .dh-empty { padding:36px 24px; }
.console-body #view-dashboard .dh-empty h3 { font-size:17px; letter-spacing:-.015em; }
.console-body #view-dashboard .dh-balances dd { font-size:28px; font-weight:700; letter-spacing:-.03em; }
.console-body #view-dashboard .dh-footer { border-top-color:rgba(0,0,0,.08); }
.console-body #view-dashboard .dh-progress,
.console-body #view-dashboard .dh-storage-meter { height:6px; border-radius:3px; }

/* ---------- Controls: pill buttons, soft fields, segmented pills ---------- */
.console-body [data-pe-button="primary"],
.console-body [data-pe-button="secondary"],
.console-body [data-pe-button="ghost"],
.console-body [data-pe-button="danger"] { border-radius:980px!important; padding-inline:14px!important; font-weight:500; }
.console-body [data-pe-button="primary"] { border-color:var(--pe-accent)!important; background:var(--pe-accent)!important; color:#fff!important; }
.console-body [data-pe-button="primary"]:not(:disabled):hover { background:#0077ed!important; border-color:#0077ed!important; }
.console-body [data-pe-button="secondary"] { border-color:transparent!important; background:rgba(0,0,0,.055)!important; color:var(--ink)!important; }
.console-body [data-pe-button="secondary"]:not(:disabled):hover { background:rgba(0,0,0,.09)!important; }
.console-body [data-pe-button="danger"] { border-color:transparent!important; background:rgba(215,0,21,.08)!important; color:var(--pe-danger)!important; }
.console-body [data-pe-button="danger"]:not(:disabled):hover { background:var(--pe-danger)!important; color:#fff!important; }
.console-body [data-pe-control="segmented"] { padding:3px; border:0; border-radius:980px; background:rgba(0,0,0,.055); }
.console-body [data-pe-button="segment"] { border:0; border-radius:980px!important; }
.console-body [data-pe-button="segment"][aria-pressed="true"],
.console-body [data-pe-button="segment"][aria-selected="true"],
.console-body [data-pe-button="segment"].on { background:#fff!important; color:var(--ink)!important; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.console-body [data-pe-control="input"],
.console-body [data-pe-control="textarea"],
.console-body [data-pe-control="select"],
.console-body #view-settings input[type="text"],
.console-body #view-settings input[type="email"],
.console-body #view-settings input[type="password"],
.console-body #view-settings textarea { border-color:rgba(0,0,0,.12); border-radius:10px; background:#fff; }
.console-body [data-pe-control="input"]:focus-within,
.console-body [data-pe-control="textarea"]:focus-within,
.console-body #view-settings input:focus,
.console-body #view-settings textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,113,227,.18); outline:0; }
.console-body :focus-visible { outline-color:var(--blue); }

/* ---------- Projects ---------- */
.console-body #view-projects .library-shell { overflow:hidden; border-radius:22px; background:#fff; box-shadow:var(--shadow-sm),0 0 0 1px rgba(0,0,0,.04); }
.console-body #view-projects .library-nav { background:#fbfbfd; border-right:1px solid rgba(0,0,0,.06); }
.console-body #view-projects .library-segment > button { border-radius:10px; font-size:14px; }
.console-body #view-projects .library-segment > button.on,
.console-body #view-projects .project-tree button.on { background:rgba(0,113,227,.1); color:var(--blue); }
.console-body #view-projects [data-pe-region="media"],
.console-body .project-card .thumb { border-radius:12px; background:#f5f5f7; }

/* ---------- Community view inside the console ---------- */
.console-body .console > main:has(.console-community-view.on) { background:#fff; }

/* ---------- Dialogs and menus ---------- */
.console-body dialog { border-radius:20px; }
.console-body dialog::backdrop { background:rgba(0,0,0,.32); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.console-body .account-menu { border-radius:14px; box-shadow:var(--pe-shadow-short),0 0 0 1px rgba(0,0,0,.06); }

@media(max-width:760px) {
  .console-body .console > main { padding:28px 16px 80px; }
  .console-body .console-nav { -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; }
}
@media(prefers-reduced-motion:reduce) { .console-body * { transition:none!important; } }