/* Computer Butler — Figma-aligned visual system for portal and admin */
html{background:#f7f9fc}
body.portal-app,
body.admin-app{
  --accent:#0d47a1;
  --accent-dark:#083b83;
  --accent-soft:#e3f2fd;
  --ink:#172033;
  --muted:#64748b;
  --paper:#ffffff;
  --warm:#f7f9fc;
  --panel:#ffffff;
  --line:#d7e1ee;
  --success:#2e7d32;
  --warning:#946200;
  --danger:#b42318;
  --shadow:0 10px 30px rgba(23,32,51,.07);
  background:var(--warm);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.portal-app .portal-header,.admin-app .portal-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(215,225,238,.9)}
.portal-app .portal-header-inner,.admin-app .portal-header-inner{width:min(100% - 40px,1180px);min-height:72px}
.portal-app .portal-main,.admin-app .portal-main{width:min(100% - 40px,1180px);padding-top:28px}
.portal-app .portal-brand,.admin-app .portal-brand{font-size:16px;letter-spacing:-.2px}
.portal-app .portal-brand span,.admin-app .portal-brand span{color:var(--accent);font-family:inherit;font-style:normal;font-weight:700}
.portal-product-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.portal-product-nav a{color:var(--muted);font-size:13px;font-weight:750;text-decoration:none;padding:8px 11px;border-radius:999px}
.portal-product-nav a:hover,.portal-product-nav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.portal-app .panel,.admin-app .panel{background:#fff;border-color:var(--line);border-radius:18px;box-shadow:var(--shadow)}
.portal-app .panel h1,.portal-app .panel h2,.portal-app .panel h3,.admin-app .panel h1,.admin-app .panel h2,.admin-app .panel h3{font-family:inherit;color:var(--ink)}
.portal-app .panel h1,.admin-app .panel h1{font-size:34px;line-height:1.16;font-weight:780;letter-spacing:-.8px}
.portal-app .eyebrow,.admin-app .eyebrow{color:var(--accent);letter-spacing:.13em}
.portal-app .primary-button,.admin-app .primary-button{min-height:48px;border-radius:12px;border-color:var(--accent);background:var(--accent);box-shadow:0 8px 18px rgba(13,71,161,.16)}
.portal-app .primary-button:hover,.admin-app .primary-button:hover{background:var(--accent-dark);border-color:var(--accent-dark);transform:translateY(-1px)}
.portal-app .secondary-button,.admin-app .secondary-button,.portal-app .logout-button,.admin-app .logout-button{min-height:44px;border-radius:11px;border-color:#b8c7da;background:#fff;color:var(--ink)}
.portal-app .secondary-button:hover,.admin-app .secondary-button:hover,.portal-app .logout-button:hover,.admin-app .logout-button:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.portal-app button:focus-visible,.portal-app a:focus-visible,.portal-app input:focus-visible,.portal-app select:focus-visible,.portal-app textarea:focus-visible,.admin-app button:focus-visible,.admin-app a:focus-visible,.admin-app input:focus-visible,.admin-app select:focus-visible,.admin-app textarea:focus-visible{outline:3px solid rgba(33,150,243,.28);outline-offset:3px}
.portal-app .field label,.admin-app .field label{color:#52627a;font-weight:750}
.portal-app .field input,.portal-app .field select,.portal-app .field textarea,.admin-app .field input,.admin-app .field select,.admin-app .field textarea{min-height:48px;border-radius:12px;padding:12px 14px;border-color:var(--line);background:#fff;color:var(--ink)}
.portal-app .field textarea,.admin-app .field textarea{min-height:112px}
.portal-app .field input:focus,.portal-app .field select:focus,.portal-app .field textarea:focus,.admin-app .field input:focus,.admin-app .field select:focus,.admin-app .field textarea:focus{outline:3px solid rgba(33,150,243,.16);border-color:var(--accent)}
.portal-app .message.info,.admin-app .message.info{background:var(--accent-soft);color:#315784}
.portal-app .service-note{border-left:0;border:1px solid #c8dcf2;border-radius:12px;background:#eef6ff;color:#41536d;padding:13px 14px}
/* Login */
.portal-app .auth-main{width:min(100% - 32px,520px);padding:64px 0}
.portal-app .auth-panel{padding:38px;background:#fff}
.portal-app .auth-heading h1{font-size:38px;letter-spacing:-1px}
.portal-app .auth-intro{max-width:410px;margin-left:auto;margin-right:auto}
.portal-app .google-button{border-color:var(--line);background:#fff;color:var(--ink)}
.portal-app .google-button:hover{border-color:var(--accent);background:var(--accent-soft)}
.portal-app .provider-note,.portal-app .auth-security-note,.portal-app .login-divider{color:var(--muted)}
.portal-app .auth-footnote{border-color:var(--line)}
/* Dashboard */
.portal-dashboard{display:grid;gap:20px}
.dashboard-hero{overflow:hidden;padding:0!important;background:linear-gradient(135deg,#fff 0%,#f3f8fe 100%)!important;border-color:#c8dcf2!important}
.dashboard-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:28px;padding:32px;align-items:center}
.dashboard-copy h1{max-width:720px}
.dashboard-copy .muted{max-width:650px;margin-bottom:0}
.dashboard-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.dashboard-account{border:1px solid #c8dcf2;background:rgba(255,255,255,.86);border-radius:16px;padding:22px}
.dashboard-account-label{margin:0 0 4px;font-size:12px;color:var(--muted)}
.dashboard-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dashboard-stat{border:1px solid var(--line);border-radius:16px;background:#fff;padding:18px;min-height:112px;box-shadow:0 6px 18px rgba(23,32,51,.04)}
.dashboard-stat strong{display:block;font:780 32px/1 Inter,sans-serif;color:var(--accent);margin-bottom:12px}
.dashboard-stat span{display:block;color:var(--muted);font-size:12px}
.portal-workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:20px;align-items:start}
.portal-stack{display:grid;gap:20px}
.portal-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.portal-section-heading h2,.portal-section-heading p{margin:0}
.portal-app .ticket-list{gap:10px}
.portal-app .ticket-row{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.portal-app .ticket-row:hover{background:#fff;border-color:#90caf9;transform:translateY(-1px);box-shadow:0 8px 20px rgba(23,32,51,.07)}
.portal-app .ticket-row:last-child{padding-bottom:16px;border-bottom:1px solid var(--line)}
.portal-app .ticket-title{display:block;margin-bottom:5px}
.profile-panel{position:sticky;top:96px}
.account-compact-note{border-radius:12px;background:var(--accent-soft);padding:12px 14px;margin-bottom:16px}
/* Status system */
.portal-app .account-badge,.portal-app .status-badge,.admin-app .account-badge,.admin-app .status-badge{border:0;font-weight:750;padding:5px 10px}
.portal-app .account-badge{background:var(--accent-soft);color:#315784}
.portal-app .status-badge.in_progress,.admin-app .status-badge.in_progress,.portal-app .status-badge.accepted,.admin-app .status-badge.accepted{background:#e3f2fd;color:#315784}
.portal-app .status-badge.waiting,.admin-app .status-badge.waiting,.portal-app .status-badge.pending,.admin-app .status-badge.pending,.portal-app .status-badge.requested,.admin-app .status-badge.requested,.admin-app .status-badge.awaiting_payment{background:#fff4d6;color:var(--warning)}
.portal-app .status-badge.paid,.portal-app .status-badge.resolved,.admin-app .status-badge.paid,.admin-app .status-badge.resolved{background:#e8f5e9;color:var(--success)}
.portal-app .status-badge.declined,.portal-app .status-badge.closed,.admin-app .status-badge.declined,.admin-app .status-badge.closed{background:#fdecea;color:var(--danger)}
/* Ticket detail */
.ticket-page-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:20px;align-items:start}
.ticket-main-column,.ticket-side-column{display:grid;gap:20px}
.ticket-side-column{position:sticky;top:96px}
.next-action-panel{border-color:#90caf9!important;background:linear-gradient(145deg,#fff,#eef6ff)!important}
.next-action-panel h2{margin-bottom:8px!important}.next-action-panel p:last-child{margin-bottom:0}
.portal-app #ticketPanel h1{max-width:760px;margin-bottom:8px}
.portal-app #ticketPanel .state-card{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--accent-soft);border-color:#c8dcf2}
.portal-app #ticketPanel .description{margin-top:18px;line-height:1.75;background:#fff}
.portal-app .payment-box{border-color:#ead28e;background:#fff8e7}
.portal-app .booking-box{border-color:#b8d8c1;background:#edf8f0}
/* Admin */
.admin-app .portal-main{max-width:1320px}
.admin-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}
.admin-sidebar{position:sticky;top:96px;border:1px solid #26354e;border-radius:18px;background:#172033;color:#fff;padding:20px;min-height:520px;box-shadow:0 14px 34px rgba(23,32,51,.16)}
.admin-sidebar h2{margin:0 0 4px;font-size:18px}.admin-sidebar p{margin:0 0 24px;color:#9fb0c6;font-size:12px}.admin-sidebar nav{display:grid;gap:8px}
.admin-sidebar a,.admin-sidebar button{width:100%;border:0;border-radius:10px;background:transparent;color:#d9e1ed;padding:11px 12px;text-align:left;text-decoration:none;font:inherit;font-size:13px;cursor:pointer}
.admin-sidebar a:hover,.admin-sidebar a.active,.admin-sidebar button:hover{background:var(--accent);color:#fff}
.admin-content{min-width:0}
.admin-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.admin-metric{border:1px solid var(--line);border-radius:16px;background:#fff;padding:16px;min-height:100px}
.admin-metric strong{display:block;font:780 30px/1 Inter,sans-serif;color:var(--accent);margin-bottom:12px}.admin-metric span{color:var(--muted);font-size:12px}
.admin-toolbar{align-items:center!important;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:8px}.admin-toolbar-controls{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.admin-search{min-width:260px}
.admin-app .admin-row{margin:10px 0;border:1px solid var(--line)!important;border-radius:14px;padding:15px!important;background:#fff!important;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.admin-app .admin-row:hover{transform:translateY(-1px);border-color:#90caf9!important;box-shadow:0 8px 20px rgba(23,32,51,.07)}
.admin-app .admin-row strong{display:block;margin-bottom:4px}.admin-app .ticket-meta{min-width:230px}.admin-app #detailPanel{scroll-margin-top:100px}.admin-app .state-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-app .state-card{background:var(--accent-soft);border-color:#c8dcf2}
.mobile-portal-nav{display:none}
@media(max-width:980px){.dashboard-hero-grid,.portal-workspace,.ticket-page-grid,.admin-shell{grid-template-columns:1fr}.profile-panel,.ticket-side-column,.admin-sidebar{position:static}.admin-sidebar{min-height:0}.admin-sidebar nav{grid-template-columns:repeat(3,1fr)}.admin-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){body.portal-app{padding-bottom:76px}.portal-app .portal-header-inner,.admin-app .portal-header-inner,.portal-app .portal-main,.admin-app .portal-main{width:min(100% - 28px,1180px)}.portal-product-nav{display:none}.dashboard-hero-grid{padding:24px 20px}.dashboard-stats{grid-template-columns:1fr}.dashboard-stat{min-height:82px;display:flex;align-items:center;justify-content:space-between}.dashboard-stat strong{margin:0}.portal-section-heading,.account-line{display:grid;grid-template-columns:1fr}.mobile-portal-nav{position:fixed;z-index:50;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(16px)}.mobile-portal-nav a{display:grid;place-items:center;min-height:48px;border-radius:10px;color:var(--muted);font-size:12px;font-weight:750;text-decoration:none}.mobile-portal-nav a:hover,.mobile-portal-nav a.active{background:var(--accent-soft);color:var(--accent)}.admin-summary,.admin-app .state-grid,.admin-sidebar nav{grid-template-columns:1fr}.admin-search,.admin-toolbar-controls,.admin-toolbar-controls .field{width:100%;min-width:0!important}.admin-app .admin-row{grid-template-columns:1fr!important}.admin-app .ticket-meta{justify-content:flex-start;min-width:0}}