/* ============================================================
   CivilCodeAi 1.0.4 — Design system
   Palette : blueprint navy #0F1B2D · paper #F4F6F9 · engineer blue #1D5DD8
             safety amber #F5A524 · rebar grey #64748B
   Type    : Prompt (display) · Noto Sans Thai (body) · IBM Plex Mono (ตัวเลข/รหัส)
   ============================================================ */
:root {
  --navy: #0F1B2D;
  --navy-2: #16263D;
  --paper: #F4F6F9;
  --card: #FFFFFF;
  --ink: #1A2433;
  --muted: #64748B;
  --line: #E2E8F0;
  --blue: #1D5DD8;
  --blue-soft: #E8F0FE;
  --amber: #F5A524;
  --amber-soft: #FEF4DE;
  --green: #16A34A;
  --green-soft: #E7F6EC;
  --red: #DC2626;
  --red-soft: #FDECEC;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(15, 27, 45, .06), 0 4px 16px rgba(15, 27, 45, .05);
  --sidebar-w: 252px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Noto Sans Thai', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
h1,h2,h3,h4 { font-family: 'Prompt', sans-serif; font-weight: 600; margin: 0 0 .5em; color: var(--ink); }
.mono { font-family: 'IBM Plex Mono', monospace; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

.app { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { padding: 20px clamp(14px, 3vw, 32px) 90px; max-width: 1400px; width: 100%; margin: 0 auto; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  background:
    linear-gradient(rgba(15,27,45,.94), rgba(15,27,45,.97)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(120,160,220,.14) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(120,160,220,.14) 23px 24px),
    var(--navy);
  color: #C9D6E8;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  flex-shrink: 0;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; color: #fff; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-name { font-family: 'Prompt'; font-weight: 700; font-size: 19px; letter-spacing: .2px; }
.brand-name .ai { color: var(--amber); }
.brand-ver { margin-left: auto; font-size: 10px; color: #6C82A0; }
.proj-switch { padding: 0 14px 12px; }
.proj-label { display: block; font-size: 11px; color: #7E93B1; margin-bottom: 4px; letter-spacing: .5px; }
.proj-switch select {
  width: 100%; background: var(--navy-2); color: #E7EEF8; border: 1px solid #26364F;
  border-radius: 8px; padding: 8px 10px; font-family: 'Noto Sans Thai'; font-size: 14px;
}
.nav { flex: 1; overflow-y: auto; padding: 4px 10px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 10px; margin: 2px 0; border-radius: 9px;
  color: #B9C8DD; font-size: 14.5px; text-decoration: none;
  border-left: 3px solid transparent;
}
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item em { margin-left: auto; font-style: normal; font-size: 10px; color: #5E7494; letter-spacing: .5px; }
.nav-item:hover { background: rgba(255,255,255,.06); text-decoration: none; color: #fff; }
.nav-item.is-active { background: rgba(29,93,216,.22); color: #fff; border-left-color: var(--amber); }
.nav-item.is-active em { color: var(--amber); }
.nav-sep { height: 1px; background: #23334C; margin: 10px 6px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 14px; border-top: 1px solid #23334C; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--amber); color: var(--navy); font-family: 'Prompt'; font-weight: 700; display: grid; place-items: center; }
.who { flex: 1; min-width: 0; }
.who strong { display: block; color: #fff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { color: #7E93B1; font-size: 11px; }
.logout { color: #7E93B1; } .logout:hover { color: #fff; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px clamp(14px, 3vw, 32px);
  background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.page-title { font-size: 19px; margin: 0; }
.topbar-right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.burger { display: none; background: none; border: 0; color: var(--ink); padding: 4px; cursor: pointer; }

/* ---------- Cards / grid ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 18px; }
.card h2 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.card h2 .code { font-family: 'IBM Plex Mono'; font-size: 10.5px; background: var(--navy); color: var(--amber); border-radius: 4px; padding: 2px 6px; letter-spacing: .5px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.stat .k { font-size: 12px; color: var(--muted); }
.stat .v { font-family: 'Prompt'; font-size: 26px; font-weight: 600; line-height: 1.2; }
.stat .v small { font-size: 13px; color: var(--muted); font-weight: 400; }
.stat.accent { border-top: 3px solid var(--amber); }
.stat.blue { border-top: 3px solid var(--blue); }
.stat.green { border-top: 3px solid var(--green); }

/* measuring-tape progress bar */
.tape { position: relative; height: 14px; background: #EDF1F6; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); }
.tape > i {
  display: block; height: 100%;
  background: repeating-linear-gradient(90deg, var(--amber) 0 18px, #E8940A 18px 20px);
  border-radius: 7px 0 0 7px;
  transition: width .4s ease;
}
.tape.blue > i { background: repeating-linear-gradient(90deg, var(--blue) 0 18px, #1348AE 18px 20px); }

/* ---------- Buttons / forms ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Prompt'; font-weight: 500; font-size: 14px;
  border-radius: 9px; padding: 8px 15px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1.3; white-space: nowrap;
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-amber { background: var(--amber); color: var(--navy); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-danger { background: var(--red-soft); color: var(--red); border-color: #F5C6C6; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
.btn svg { width: 16px; height: 16px; }

label.f { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; font-weight: 500; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=time], input[type=url], select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px; font-family: 'Noto Sans Thai'; font-size: 14.5px; color: var(--ink);
  background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(29,93,216,.35); outline-offset: 0; border-color: var(--blue); }
.field { margin-bottom: 13px; min-width: 0; }
.field > input, .field > select, .field > textarea { min-width: 0; }
.form-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.help { font-size: 12px; color: var(--muted); }

/* ---------- Tables ---------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  background: var(--navy); color: #DDE7F4; font-family: 'Prompt'; font-weight: 500;
  padding: 8px 10px; text-align: left; font-size: 13px; white-space: nowrap;
}
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:hover td { background: #F8FAFD; }
.tbl .num { text-align: right; font-family: 'IBM Plex Mono'; font-size: 13px; }
.tbl .ctr { text-align: center; }
.badge { display: inline-block; font-size: 11.5px; border-radius: 20px; padding: 2px 10px; font-weight: 600; }
.badge-blue { background: var(--blue-soft); color: var(--blue); }
.badge-amber { background: var(--amber-soft); color: #B97A0A; }
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-red { background: var(--red-soft); color: var(--red); }
.badge-grey { background: #EEF2F7; color: var(--muted); }

/* ---------- Flash ---------- */
.flash { margin: 14px clamp(14px,3vw,32px) 0; padding: 11px 15px; border-radius: 10px; font-size: 14px; }
.flash-ok { background: var(--green-soft); color: var(--green); border: 1px solid #BCE5C8; }
.flash-err { background: var(--red-soft); color: var(--red); border: 1px solid #F3C1C1; }
.flash-info { background: var(--blue-soft); color: var(--blue); border: 1px solid #C4D7F8; }

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background:
    linear-gradient(rgba(15,27,45,.92), rgba(15,27,45,.96)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(120,160,220,.16) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(120,160,220,.16) 31px 32px),
    var(--navy);
}
.auth-card { width: 100%; max-width: 410px; background: var(--card); border-radius: 16px; padding: 30px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.auth-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.auth-logo img { width: 44px; height: 44px; }
.auth-logo b { font-family: 'Prompt'; font-size: 24px; font-weight: 700; }
.auth-logo b span { color: var(--amber); }
.auth-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; }
.auth-links { display: flex; justify-content: space-between; font-size: 13.5px; margin-top: 14px; }
.auth-err { background: var(--red-soft); color: var(--red); border-radius: 9px; padding: 9px 12px; font-size: 13.5px; margin-bottom: 14px; }
.auth-ok { background: var(--green-soft); color: var(--green); border-radius: 9px; padding: 9px 12px; font-size: 13.5px; margin-bottom: 14px; }

/* ---------- Gantt (แผนงาน) ---------- */
.gantt { display: grid; font-size: 12.5px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 900px; }
.g-head, .g-row { display: grid; grid-template-columns: 34px 240px 1fr 170px; }
.g-head { background: var(--navy); color: #DDE7F4; font-family: 'Prompt'; }
.g-head > div { padding: 6px 8px; }
.g-days { display: grid; }
.g-days > span { text-align: center; padding: 3px 0; border-left: 1px solid rgba(255,255,255,.1); font-size: 10.5px; }
.g-days > span.we { color: var(--amber); }
.g-row { border-top: 1px solid var(--line); background: #fff; }
.g-row.cat { background: var(--blue-soft); font-family: 'Prompt'; font-weight: 500; }
.g-row.parent { background: #FBFCFE; font-weight: 600; }
.g-row > div { padding: 6px 8px; }
.g-row .g-name { cursor: pointer; }
.g-row .g-name:hover { color: var(--blue); }
.g-cells { position: relative; display: grid; }
.g-cells > i { border-left: 1px solid #EEF2F7; } .g-cells > i.we { background: #FAFBFD; }
.g-bar {
  position: absolute; top: 5px; bottom: 5px; border-radius: 5px;
  background: linear-gradient(180deg, #2E6FE8, #1D5DD8);
  box-shadow: inset 0 -2px rgba(0,0,0,.15); cursor: pointer; min-width: 8px;
}
.g-bar.today-line { background: none; }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 2; }
.g-remark { font-size: 11.5px; color: var(--muted); }

/* ---------- Calendar ---------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cal .dow { background: var(--navy); color: #DDE7F4; text-align: center; font-family: 'Prompt'; font-size: 13px; padding: 7px 0; }
.cal .day { min-height: 96px; background: #fff; border-top: 1px solid var(--line); border-left: 1px solid var(--line); padding: 5px 6px; font-size: 12px; position: relative; }
.cal .day.dim { background: #F8FAFC; color: #A7B4C6; }
.cal .day.today { outline: 2px solid var(--amber); outline-offset: -2px; }
.cal .dnum { font-family: 'IBM Plex Mono'; font-size: 12px; }
.cal .ev { display: block; background: var(--blue-soft); color: var(--blue); border-radius: 5px; padding: 1px 6px; margin-top: 3px; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.cal .ev.line { background: var(--green-soft); color: var(--green); }

/* ---------- Modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(15,27,45,.55); display: none; z-index: 60; padding: 16px; overflow-y: auto; }
.modal-bg.open { display: grid; place-items: start center; }
.modal { background: #fff; border-radius: 14px; width: 100%; max-width: 620px; margin: 6vh 0; padding: 22px; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.modal h3 { margin-top: 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- Daily report form (แบบเดียวกับกระดาษ) ---------- */
.dr-sheet { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; max-width: 900px; margin: 0 auto; }
.dr-title { text-align: center; background: #D9E7D0; font-family: 'Prompt'; font-weight: 600; font-size: 18px; border: 1px solid #9DBD8B; padding: 6px; margin: 10px 0 14px; }
.dr-co { text-align: center; font-family: 'Prompt'; font-weight: 600; }
.dr-line { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 7px 0; font-size: 14px; }
.dr-line .u { border-bottom: 1px dotted #94A3B8; min-width: 120px; display: inline-block; }
.dr-line input[type=text] { border: 0; border-bottom: 1px dotted #94A3B8; border-radius: 0; padding: 2px 6px; width: auto; min-width: 90px; background: transparent; }
.dr-check { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; font-size: 13.5px; }
.dr-check input { width: 16px; height: 16px; }
table.dr-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0; }
.dr-tbl th, .dr-tbl td { border: 1px solid #94A3B8; padding: 5px 7px; }
.dr-tbl th { background: #EEF2F7; font-family: 'Prompt'; font-weight: 500; font-size: 12.5px; }
.dr-tbl input, .dr-tbl textarea { border: 0; padding: 2px 4px; width: 100%; background: transparent; border-radius: 0; }
.dr-tbl input.n { width: 60px; text-align: center; }
.dr-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; margin-top: 26px; font-size: 13px; }

/* ---------- Print / PDF ---------- */
@media print {
  .no-print, .sidebar, .topbar, .tabbar, .btn, .flash { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .content { padding: 0; max-width: none; }
  .card, .dr-sheet { border: 0; box-shadow: none; padding: 0; }
  .gantt { min-width: 0; }
  a { color: inherit; }
  @page { size: A4 landscape; margin: 10mm; }
  .print-portrait ~ * { }
}
.print-portrait { display: none; }
@media print { body.portrait @page { size: A4 portrait; } }

/* ---------- Mobile ---------- */
.tabbar { display: none; }
.sidebar-backdrop { display: none; }
@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 70;
    transform: translateX(-100%); transition: transform .25s ease; height: 100dvh;
  }
  .sidebar.open { transform: none; }
  .sidebar.open ~ .sidebar-backdrop, .sidebar.open + .main .sidebar-backdrop { display: block; }
  body:has(.sidebar.open) .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 65; }
  .burger { display: block; }
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--navy); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #93A8C4; font-size: 10px; text-decoration: none; padding: 3px 8px; border-radius: 8px; }
  .tabbar a svg { width: 21px; height: 21px; }
  .tabbar a:active { background: rgba(255,255,255,.08); }
  .content { padding-bottom: 110px; }
  .dr-sheet { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============ Legacy UI base ============ */
.card { transition: box-shadow .25s, transform .25s; }
.card:hover { box-shadow: 0 6px 24px rgba(15,27,45,.09); }
.btn { transition: transform .12s, box-shadow .2s, background .2s, border-color .2s, color .2s; }
.btn:active { transform: scale(.965); }
.btn-primary { box-shadow: 0 2px 10px rgba(29,93,216,.28); }
.btn-amber { box-shadow: 0 2px 10px rgba(245,165,36,.3); }
.stat { position: relative; overflow: hidden; transition: transform .2s, box-shadow .25s; }
.stat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,27,45,.1); }
.stat::after { content: ''; position: absolute; right: -18px; top: -18px; width: 64px; height: 64px; border-radius: 50%; background: currentColor; opacity: .06; }
.tape > i { transition: width .8s cubic-bezier(.2,.8,.25,1); background-image: repeating-linear-gradient(90deg, var(--amber) 0 18px, #DF8F0E 18px 20px); }
.nav-item { transition: background .18s, color .18s, transform .18s; border-radius: 10px; }
.nav-item:hover { transform: translateX(3px); }
.nav-item.is-active { box-shadow: inset 3px 0 0 var(--amber); }
.badge { letter-spacing: .2px; }
.tbl tr { transition: background .15s; }
.tbl tbody tr:hover td, .tbl tr:hover > td { background: #F6F9FE; }
.modal { animation: pop .22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }
.flash { animation: rise .3s ease both; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,93,216,.13); }
.page-title { position: relative; }
.page-title::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 34px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--amber), var(--blue)); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #C9D4E2; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #A9B9CD; }


/* ============================================================
   CivilCodeAi 1.0.4 — EndShop Center inspired UI refresh
   ============================================================ */
:root {
  --paper: #f6f7fb;
  --card: #ffffff;
  --ink: #172033;
  --muted: #778196;
  --line: #e8ebf1;
  --blue: #2563eb;
  --blue-soft: #edf4ff;
  --amber: #ff7a1a;
  --amber-soft: #fff1e7;
  --green: #20a66a;
  --green-soft: #eaf8f1;
  --red: #ef4444;
  --red-soft: #fff0f0;
  --navy: #172033;
  --navy-2: #202b41;
  --radius: 18px;
  --shadow: 0 8px 30px rgba(23,32,51,.06);
  --sidebar-w: 278px;
}
body.cca-v103 {
  background:
    radial-gradient(circle at 90% 0%, rgba(255,122,26,.055), transparent 25rem),
    var(--paper);
  font-size: 14.5px;
}
.cca-v103 .content {
  max-width: 1580px;
  padding: 24px clamp(16px,2.4vw,38px) 100px;
}
.cca-v103 .sidebar {
  width: var(--sidebar-w);
  background: rgba(255,255,255,.96);
  color: var(--ink);
  border-right: 1px solid var(--line);
  box-shadow: 12px 0 40px rgba(23,32,51,.035);
  backdrop-filter: blur(18px);
  transition: width .22s ease, transform .25s ease;
  overflow: visible;
}
.cca-v103 .brand {
  color: var(--ink);
  padding: 20px 22px 16px;
  min-height: 76px;
}
.cca-v103 .brand img {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 7px 14px rgba(255,122,26,.18));
}
.cca-v103 .brand-name { color: var(--ink); font-size: 20px; }
.cca-v103 .brand-name .ai { color: #ff4d2e; }
.cca-v103 .brand-ver { color: #a3aabc; }
.cca-v103 .proj-switch {
  margin: 0 14px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(135deg,#fff,#fbfbfd);
}
.cca-v103 .proj-label {
  color: #9aa2b2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.cca-v103 .proj-switch select {
  background: transparent;
  border: 0;
  color: var(--ink);
  padding: 3px 2px;
  font-weight: 600;
  box-shadow: none;
}
.cca-v103 .nav { padding: 3px 12px 14px; }
.cca-v103 .nav-caption {
  padding: 14px 11px 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #b0b6c3;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.cca-v103 .nav-item {
  color: #677187;
  border: 0;
  border-radius: 13px;
  padding: 10px 12px;
  margin: 3px 0;
  font-weight: 500;
}
.cca-v103 .nav-item svg { width: 19px; height: 19px; }
.cca-v103 .nav-item em { color: #b2b9c6; }
.cca-v103 .nav-item:hover {
  background: #f7f8fb;
  color: var(--ink);
  transform: translateX(2px);
}
.cca-v103 .nav-item.is-active {
  color: #e7452d;
  background: linear-gradient(90deg,#fff0eb,#fff8f5);
  box-shadow: inset 3px 0 0 #ff5d3a;
}
.cca-v103 .nav-item.is-active em { color: #ff6a45; }
.cca-v103 .nav-sep { background: var(--line); }
.cca-v103 .sidebar-user {
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 14px 16px;
}
.cca-v103 .avatar {
  background: linear-gradient(135deg,#ff8a2b,#ff4d2e);
  color: #fff;
  box-shadow: 0 7px 18px rgba(255,77,46,.23);
}
.cca-v103 .who strong { color: var(--ink); }
.cca-v103 .who small, .cca-v103 .logout { color: #98a0af; }
.cca-v103 .logout:hover { color: var(--red); }
.sidebar-toggle {
  position: absolute;
  top: 25px;
  right: -15px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #8991a1;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 5px 15px rgba(23,32,51,.08);
}
.sidebar-toggle:hover { color: var(--ink); }
body.sidebar-compact .sidebar { width: 86px; }
body.sidebar-compact .sidebar .brand-name,
body.sidebar-compact .sidebar .brand-ver,
body.sidebar-compact .sidebar .proj-switch,
body.sidebar-compact .sidebar .nav-caption,
body.sidebar-compact .sidebar .nav-item span,
body.sidebar-compact .sidebar .nav-item em,
body.sidebar-compact .sidebar .who,
body.sidebar-compact .sidebar .logout { display: none; }
body.sidebar-compact .sidebar .brand { justify-content: center; padding-inline: 12px; }
body.sidebar-compact .sidebar .nav-item { justify-content: center; padding: 11px; }
body.sidebar-compact .sidebar .sidebar-user { justify-content: center; }
body.sidebar-compact .sidebar-toggle svg { transform: rotate(180deg); }

.cca-v103 .topbar {
  min-height: 78px;
  padding: 14px clamp(16px,2.4vw,38px);
  background: rgba(246,247,251,.86);
  border-bottom: 1px solid rgba(232,235,241,.8);
  backdrop-filter: blur(16px);
}
.cca-v103 .page-heading { min-width: 0; }
.cca-v103 .page-title {
  font-size: 22px;
  line-height: 1.15;
}
.cca-v103 .page-title::after { display: none; }
.cca-v103 .page-project {
  max-width: min(62vw,720px);
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cca-v103 .topbar-right { align-items: center; }

.cca-v103 .card {
  border: 1px solid rgba(232,235,241,.95);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 20px;
}
.cca-v103 .card:hover {
  box-shadow: 0 14px 40px rgba(23,32,51,.085);
  transform: translateY(-1px);
}
.cca-v103 .stat {
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.cca-v103 .btn {
  border-radius: 12px;
  padding: 8px 15px;
}
.cca-v103 .btn-primary {
  background: linear-gradient(135deg,#ff4d2e,#ff7a1a);
  box-shadow: 0 8px 18px rgba(255,91,43,.24);
}
.cca-v103 .btn-amber {
  background: linear-gradient(135deg,#ff8b24,#ffb020);
  color: #fff;
}
.cca-v103 .btn-ghost {
  background: rgba(255,255,255,.9);
}
.cca-v103 input:not([type]),
.cca-v103 input[type=text],
.cca-v103 input[type=email],
.cca-v103 input[type=password],
.cca-v103 input[type=number],
.cca-v103 input[type=date],
.cca-v103 input[type=time],
.cca-v103 input[type=url],
.cca-v103 select,
.cca-v103 textarea {
  border-radius: 13px;
  border-color: #e4e7ed;
  padding: 10px 12px;
  background: #fff;
}
.cca-v103 input:focus,
.cca-v103 select:focus,
.cca-v103 textarea:focus {
  border-color: #ff8a56;
  box-shadow: 0 0 0 4px rgba(255,107,61,.11);
  outline: 0;
}
.cca-v103 table.tbl {
  border-collapse: separate;
  border-spacing: 0;
}
.cca-v103 .tbl th {
  background: #172033;
  padding: 10px 11px;
}
.cca-v103 .tbl th:first-child { border-radius: 12px 0 0 12px; }
.cca-v103 .tbl th:last-child { border-radius: 0 12px 12px 0; }
.cca-v103 .tbl td { padding: 10px 11px; }
.cca-v103 .badge { padding: 3px 10px; }

/* shared product-style page components */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 26px 28px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 93% 20%, rgba(255,122,26,.34), transparent 13rem),
    linear-gradient(135deg,#172033,#222f49 72%,#25324a);
  color: #fff;
  box-shadow: 0 18px 45px rgba(23,32,51,.16);
  margin-bottom: 20px;
}
.page-hero::after {
  content:'';
  position:absolute;
  width:190px;height:190px;
  right:-55px;bottom:-105px;
  border:32px solid rgba(255,255,255,.045);
  border-radius:50%;
}
.page-hero .eyebrow {
  font: 600 11px/1.2 'IBM Plex Mono',monospace;
  letter-spacing:.11em;
  color:#ffb27e;
  text-transform:uppercase;
}
.page-hero h2 {
  color:#fff;
  font-size:clamp(22px,2.2vw,32px);
  margin:7px 0 5px;
}
.page-hero p { margin:0; color:#b7c0d2; max-width:860px; }
.page-hero-actions { display:flex;gap:8px;flex-wrap:wrap;margin-top:18px; }
.page-hero .btn-ghost { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.08);color:#fff; }
.segmented {
  display:inline-flex;
  gap:4px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 20px rgba(23,32,51,.045);
}
.segmented button,.segmented a {
  border:0;
  background:transparent;
  border-radius:10px;
  padding:8px 13px;
  font:500 13px 'Prompt';
  color:var(--muted);
  cursor:pointer;
  text-decoration:none;
}
.segmented .active {
  background:#172033;
  color:#fff;
  box-shadow:0 5px 13px rgba(23,32,51,.16);
}
.mode-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;
}
.mode-card {
  position:relative;
  display:block;
  padding:19px;
  border:1px solid var(--line);
  border-radius:19px;
  color:var(--ink);
  background:#fff;
  text-decoration:none;
  cursor:pointer;
  transition:.2s ease;
}
.mode-card:hover {
  transform:translateY(-3px);
  border-color:#ffc7b7;
  box-shadow:0 14px 30px rgba(23,32,51,.08);
  text-decoration:none;
}
.mode-card.active { border-color:#ff8e6c; box-shadow:0 0 0 3px rgba(255,105,59,.1); }
.mode-icon {
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--amber-soft);color:#ff5b31;
  font-size:22px;margin-bottom:12px;
}
.mode-card h3 { font-size:16px;margin:0 0 5px; }
.mode-card p { color:var(--muted);font-size:12.5px;margin:0; }
.kpi-strip {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
}
.kpi-card {
  padding:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 7px 25px rgba(23,32,51,.045);
}
.kpi-card .k { color:var(--muted);font-size:11.5px; }
.kpi-card .v { margin-top:3px;font:600 24px/1.15 'Prompt'; }
.kpi-card .s { color:var(--muted);font-size:11px;margin-top:4px; }

/* BIM list */
.model-card {
  overflow:hidden;
  padding:0!important;
}
.model-card-cover {
  position:relative;
  height:150px;
  background:
    linear-gradient(135deg,rgba(23,32,51,.95),rgba(37,50,74,.9)),
    repeating-linear-gradient(0deg,transparent 0 24px,rgba(255,255,255,.05) 24px 25px),
    repeating-linear-gradient(90deg,transparent 0 24px,rgba(255,255,255,.05) 24px 25px);
  color:#fff;
  display:flex;
  align-items:flex-end;
  padding:18px;
}
.model-card-cover .shape {
  position:absolute;right:15px;top:12px;
  font-size:76px;opacity:.12;line-height:1;
}
.model-card-cover .model-tag {
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px;border-radius:99px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);
  font-size:10.5px;
}
.model-card-body { padding:18px; }
.model-card-title { font:600 17px 'Prompt';margin-bottom:4px; }
.model-card-meta { color:var(--muted);font-size:12px; }
.model-card-actions { display:flex;gap:7px;flex-wrap:wrap;margin-top:14px; }

/* database viewer */
.viewer-page {
  display:grid;
  grid-template-columns:minmax(0,1fr) 370px;
  min-height:calc(100vh - 150px);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
}
.viewer-stage { position:relative;min-height:640px;background:#f4f6fa; }
.viewer-stage canvas { width:100%;height:100%;display:block;cursor:grab; }
.viewer-stage canvas:active { cursor:grabbing; }
.viewer-toolbar {
  position:absolute;top:14px;left:14px;right:14px;
  display:flex;justify-content:space-between;gap:10px;
  pointer-events:none;z-index:3;
}
.viewer-toolbar > * { pointer-events:auto; }
.viewer-chips,.viewer-actions { display:flex;gap:7px;flex-wrap:wrap; }
.viewer-chip {
  padding:7px 11px;border-radius:11px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(226,230,238,.95);
  box-shadow:0 6px 18px rgba(23,32,51,.07);
  backdrop-filter:blur(10px);
  font-size:11.5px;color:var(--muted);
}
.viewer-chip b { color:var(--ink);font-family:'IBM Plex Mono'; }
.viewer-btn {
  border:1px solid var(--line);background:rgba(255,255,255,.92);
  color:var(--ink);border-radius:11px;padding:7px 10px;
  font:500 11.5px 'Prompt';cursor:pointer;
  box-shadow:0 6px 18px rgba(23,32,51,.06);
}
.viewer-btn:hover { border-color:#ff9b79;color:#e94b2b; }
.viewer-side {
  min-width:0;
  display:flex;flex-direction:column;
  border-left:1px solid var(--line);
  background:#fff;
}
.viewer-side-head { padding:19px;border-bottom:1px solid var(--line); }
.viewer-side-head h2 { font-size:18px;margin:0 0 4px; }
.viewer-side-scroll { overflow:auto;flex:1; }
.viewer-section { padding:17px 19px;border-bottom:1px solid var(--line); }
.viewer-section h3 {
  margin:0 0 10px;
  color:#9aa1af;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.viewer-layer {
  display:flex;align-items:center;gap:9px;
  padding:6px 0;font-size:13px;cursor:pointer;
}
.viewer-layer .sw { width:11px;height:11px;border-radius:4px; }
.viewer-layer .count { margin-left:auto;color:var(--muted);font-family:'IBM Plex Mono';font-size:11px; }
.viewer-table { width:100%;border-collapse:collapse;font-size:12px; }
.viewer-table th {
  color:var(--muted);font-size:10px;text-align:right;
  padding:5px;border-bottom:1px solid var(--line);
}
.viewer-table th:first-child,.viewer-table td:first-child { text-align:left; }
.viewer-table td {
  padding:7px 5px;border-bottom:1px solid #f0f2f6;
  text-align:right;font-family:'IBM Plex Mono';font-size:11.5px;
}
.viewer-table tr[data-mark] { cursor:pointer; }
.viewer-table tr[data-mark]:hover td,.viewer-table tr.active td { background:#fff4ef; }
.viewer-table tr.active td:first-child { color:#e94b2b;font-weight:700; }
.viewer-empty { color:var(--muted);font-size:12px; }
.viewer-pick-head { display:flex;gap:6px;margin-bottom:7px; }
.viewer-pick-mark,.viewer-pick-cat {
  border-radius:99px;padding:3px 8px;font:500 10.5px 'IBM Plex Mono';
  background:#172033;color:#fff;
}
.viewer-pick-cat { background:#eef1f6;color:#64748b; }
.viewer-pick-grid {
  display:grid;grid-template-columns:auto 1fr;gap:4px 10px;
  margin:10px 0 0;font-size:11.5px;
}
.viewer-pick-grid dt { color:var(--muted); }
.viewer-pick-grid dd { margin:0;text-align:right;font-family:'IBM Plex Mono'; }
.viewer-tip {
  position:absolute;left:14px;bottom:14px;
  max-width:520px;padding:9px 12px;border-radius:12px;
  background:rgba(23,32,51,.9);color:#fff;
  font-size:11px;backdrop-filter:blur(10px);
}

/* Studio */
.studio-layout {
  display:grid;
  grid-template-columns:350px minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.studio-panel { position:sticky;top:96px; }
.studio-step {
  display:flex;align-items:center;gap:9px;
  margin-bottom:14px;
}
.studio-step span {
  width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;
  background:#172033;color:#fff;
  font:600 11px 'IBM Plex Mono';
}
.dropzone {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  min-height:148px;
  box-sizing:border-box;
  overflow:hidden;
  border:1.5px dashed #d9dde6;
  border-radius:17px;
  background:#fafbfc;
  padding:22px 16px;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;
  user-select:none;
}
.dropzone:hover,.dropzone.drag,.dropzone:focus-within {
  border-color:#ff8a62;
  background:#fff7f3;
  box-shadow:0 0 0 3px rgba(255,112,67,.08);
}
.dropzone input[type=file] {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.dropzone .dz-icon {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:14px;
  background:#fff0eb;
  font-size:25px;
  line-height:1;
}
.dropzone .dz-copy {
  display:block;
  width:100%;
  min-width:0;
  margin-top:10px;
}
.dropzone strong {
  display:block;
  max-width:100%;
  margin:0;
  color:var(--ink);
  font-size:13.5px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.dropzone small {
  display:block;
  max-width:100%;
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
@media (max-width:520px) {
  .studio-panel .card { padding:16px; }
  .studio-step { align-items:flex-start; }
  .studio-step span { flex:0 0 28px; }
  .dropzone { min-height:138px;padding:18px 12px; }
  .dropzone .dz-icon { width:42px;height:42px;flex-basis:42px;font-size:23px; }
}

.studio-preview {
  position:relative;
  height:580px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:#f4f6fa;
}
.studio-preview canvas { width:100%;height:100%;display:block; }
.studio-preview .viewer-toolbar { position:absolute; }
.studio-tabs {
  display:flex;gap:6px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:10px;margin-bottom:14px;
}
.studio-tab {
  border:0;background:#f2f4f7;color:var(--muted);
  padding:7px 11px;border-radius:10px;font:500 12px 'Prompt';cursor:pointer;
}
.studio-tab.active { background:#172033;color:#fff; }
.studio-tab-pane { display:none; }
.studio-tab-pane.active { display:block; }
.ai-status {
  padding:12px 13px;border-radius:13px;
  background:#f6f7fa;color:var(--muted);font-size:12px;
}
.ai-status.running { background:#fff4e9;color:#b65b12; }
.ai-status.ok { background:var(--green-soft);color:var(--green); }
.ai-status.error { background:var(--red-soft);color:var(--red); }
.assumption-list {
  margin:8px 0 0;padding-left:18px;
  color:var(--muted);font-size:12px;
}
.boq-edit input {
  border:0;background:#fff7e9;border-radius:8px;
  padding:5px 7px;width:100%;font:11.5px 'IBM Plex Mono';
}
.boq-edit input.txt { font-family:'Noto Sans Thai'; }

/* quantity module tabs */
.module-pane { display:none; }
.module-pane.active { display:block; }
.model-qty-card {
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto;
  gap:15px;align-items:center;
  padding:16px;border:1px solid var(--line);border-radius:17px;
  margin-bottom:10px;background:#fff;
}
.model-qty-card .name { font:600 15px 'Prompt'; }
.model-qty-card .meta { color:var(--muted);font-size:12px; }
.model-qty-stats { display:flex;gap:15px;flex-wrap:wrap; }
.model-qty-stats b { display:block;font:600 18px 'IBM Plex Mono'; }
.model-qty-stats small { color:var(--muted); }

@media (max-width:1100px) {
  .viewer-page { grid-template-columns:1fr; }
  .viewer-stage { min-height:520px; }
  .viewer-side { border-left:0;border-top:1px solid var(--line);max-height:620px; }
  .studio-layout { grid-template-columns:1fr; }
  .studio-panel { position:static; }
}
@media (max-width:900px) {
  .sidebar-toggle { display:none; }
  body.sidebar-compact .sidebar { width:var(--sidebar-w); }
  body.sidebar-compact .sidebar .brand-name,
  body.sidebar-compact .sidebar .brand-ver,
  body.sidebar-compact .sidebar .proj-switch,
  body.sidebar-compact .sidebar .nav-caption,
  body.sidebar-compact .sidebar .nav-item span,
  body.sidebar-compact .sidebar .nav-item em,
  body.sidebar-compact .sidebar .who,
  body.sidebar-compact .sidebar .logout { display:initial; }
  .viewer-stage { min-height:440px; }
  .studio-preview { height:450px; }
}
@media (max-width:620px) {
  .page-hero { padding:22px 19px;border-radius:20px; }
  .viewer-toolbar { position:static;padding:10px;background:#fff; }
  .viewer-stage { display:flex;flex-direction:column;min-height:480px; }
  .viewer-stage canvas { min-height:400px; }
  .viewer-tip { display:none; }
  .model-qty-card { grid-template-columns:1fr; }
}

/* ============================================================
   CivilCodeAi 1.0.4 — Calendar, LINE Reminder & Integration UI
   ============================================================ */
body.cca-v103,
body.cca-v103 button,
body.cca-v103 input,
body.cca-v103 select,
body.cca-v103 textarea {
  font-family: 'Noto Sans Thai', system-ui, sans-serif;
}
body.cca-v103 h1,body.cca-v103 h2,body.cca-v103 h3,body.cca-v103 h4,
body.cca-v103 .btn,body.cca-v103 .brand-name,body.cca-v103 .page-title {
  font-family:'Prompt','Noto Sans Thai',sans-serif;
}
.cca-v103 .nav-sub { padding-left:25px; font-size:13.5px; }
.cca-v103 .nav-sub svg { width:17px;height:17px; }
.cca-v103 .full-btn { width:100%;justify-content:center; }
.cca-v103 .span-2 { grid-column:span 2; }
.cca-v103 .empty-cell { text-align:center;color:var(--muted);padding:28px!important; }
.cca-v103 .empty-state { padding:30px 18px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:16px;background:#fafbfc; }
.cca-v103 .empty-state.small { padding:20px 12px;font-size:12px; }
.cca-v103 .eyebrow { font:600 10.5px/1.3 'IBM Plex Mono',monospace;letter-spacing:.11em;text-transform:uppercase;color:#a2a9b8; }
.cca-v103 .card-head { display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:15px; }
.cca-v103 .card-head h2 { margin:2px 0 0; }
.cca-v103 .callout { display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin:0 0 18px;border-radius:14px;border:1px solid var(--line);font-size:12.5px; }
.cca-v103 .callout b { white-space:nowrap; }
.cca-v103 .callout.warn { background:#fff8eb;border-color:#f7d9a5;color:#9a5a00; }
.cca-v103 .btn-google { background:#fff;color:#344054;border:1px solid #d9dee8;box-shadow:0 5px 15px rgba(23,32,51,.06); }
.cca-v103 .btn-google::before { content:'G';font:700 14px Arial;color:#4285f4; }
.cca-v103 .btn-google:hover { border-color:#aab7ca;background:#fafcff; }
.cca-v103 .danger-stat { border-top:3px solid var(--red); }
.cca-v103 .danger-stat .v { color:var(--red); }

/* calendar hub */
.calendar-hero,.reminder-hero,.token-hero,.automation-hero,.settings-hero {
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.calendar-source-summary { display:flex;gap:10px;position:relative;z-index:1;flex:none; }
.source-pill { min-width:118px;padding:12px 14px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:rgba(255,255,255,.07);display:flex;align-items:center;gap:10px;backdrop-filter:blur(10px); }
.source-pill i { width:10px;height:10px;border-radius:50%;background:#ff8060;box-shadow:0 0 0 5px rgba(255,128,96,.14); }
.source-pill.google i { background:#9fa7b7;box-shadow:0 0 0 5px rgba(159,167,183,.14); }
.source-pill.google.connected i { background:#5bc88a;box-shadow:0 0 0 5px rgba(91,200,138,.14); }
.source-pill span { color:#c6cedc;font-size:11px; }
.source-pill b { display:block;color:#fff;font:600 20px/1 'IBM Plex Mono'; }
.calendar-toolbar { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px!important; }
.month-nav,.calendar-actions { display:flex;align-items:center;gap:9px;flex-wrap:wrap; }
.month-nav h2 { margin:1px 6px 0;font-size:20px; }
.nav-square { width:36px;height:36px;display:grid;place-items:center;background:#f7f8fb;border:1px solid var(--line);border-radius:11px;color:var(--ink);font-size:24px;text-decoration:none; }
.nav-square:hover { text-decoration:none;background:#fff1ec;color:#e84b31;border-color:#ffd2c5; }
.calendar-layout { display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start; }
.calendar-card { padding:16px!important;overflow:hidden; }
.calendar-side { min-width:0; }
.calendar-legend { display:flex;gap:17px;align-items:center;flex-wrap:wrap;padding:2px 4px 14px;color:var(--muted);font-size:11.5px; }
.calendar-legend span { display:flex;align-items:center;gap:6px; }
.calendar-legend i { width:8px;height:8px;border-radius:50%;display:inline-block; }
.dot-web { background:#ff6747; }.dot-google { background:#4285f4; }.dot-both { background:linear-gradient(135deg,#ff6747 0 50%,#4285f4 50%); }.dot-line { background:#06c755; }
.cal-modern { display:grid;grid-template-columns:repeat(7,minmax(90px,1fr));border:1px solid var(--line);border-radius:17px;overflow:auto;background:var(--line);gap:1px; }
.cal-modern .dow { position:sticky;top:0;z-index:2;background:#172033;color:#fff;text-align:center;padding:9px 4px;font:500 12px 'Prompt'; }
.cal-modern .day { min-height:128px;background:#fff;padding:8px;cursor:pointer;transition:.15s ease;overflow:hidden; }
.cal-modern .day:hover { background:#fffaf7;box-shadow:inset 0 0 0 1px #ffd8cc; }
.cal-modern .day.dim { background:#fafbfc;cursor:default; }
.cal-modern .dnum { width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font:500 12px 'IBM Plex Mono';margin-bottom:5px; }
.cal-modern .today .dnum { background:linear-gradient(135deg,#ff4d2e,#ff861d);color:#fff;box-shadow:0 5px 12px rgba(255,94,41,.23); }
.cal-modern .ev { width:100%;border:0;border-left:3px solid #ff6747;border-radius:7px;background:#fff1ed;color:#9e321f;padding:4px 6px;margin:2px 0;text-align:left;font-size:10.5px;line-height:1.35;cursor:pointer;overflow:hidden; }
.cal-modern .ev span { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.cal-modern .ev-google { border-left-color:#4285f4;background:#edf4ff;color:#2456a8; }
.cal-modern .ev-both { border-left-color:#7c62e9;background:#f2efff;color:#5b45b5; }
.cal-modern .ev.has-line { box-shadow:inset -4px 0 0 #06c755; }
.source-card { padding:17px!important; }
.source-head { display:flex;align-items:center;gap:10px; }
.source-head>div:nth-child(2) { min-width:0;flex:1; }
.source-head h3 { font-size:14px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.source-head small { display:block;color:var(--muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.source-logo { width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font:700 15px 'Prompt';background:#fff0eb;color:#ef4b31; }
.source-logo.google { background:#edf4ff;color:#4285f4; }
.source-stats { display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0; }
.source-stats>div { padding:10px;border-radius:12px;background:#f7f8fa;min-width:0; }
.source-stats b { display:block;font:600 15px 'IBM Plex Mono';white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.source-stats span { color:var(--muted);font-size:10px; }
.mini-events { display:flex;flex-direction:column;gap:7px; }
.mini-event { display:grid;grid-template-columns:42px minmax(0,1fr) 8px;gap:10px;align-items:center;padding:8px;border-radius:12px;background:#f8f9fb; }
.mini-date { text-align:center;border-right:1px solid var(--line);padding-right:8px; }
.mini-date b { display:block;font:600 15px 'IBM Plex Mono'; }.mini-date span { font-size:9.5px;color:var(--muted); }
.mini-event strong { display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.mini-event small { display:block;font-size:10px;color:var(--muted); }
.source-mark { width:7px;height:7px;border-radius:50%;background:#ff6747; }.source-mark.google { background:#4285f4; }.source-mark.both { background:#7c62e9; }

/* event editor */
.event-modal { width:min(820px,94vw);max-width:820px; }
.modal-title-row { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px; }
.modal-title-row h3 { margin:2px 0 0;font-size:20px; }
.modal-x { width:34px;height:34px;border:0;border-radius:11px;background:#f3f4f7;color:#667085;font-size:22px;cursor:pointer; }
.event-primary { grid-template-columns:repeat(4,1fr); }
.integration-box { border:1px solid var(--line);border-radius:16px;background:#fafbfc;padding:13px;margin:5px 0 14px; }
.integration-row { display:flex;align-items:center;gap:12px;padding:8px; }
.integration-row+.integration-row { border-top:1px solid var(--line); }
.integration-icon { width:39px;height:39px;border-radius:12px;display:grid;place-items:center;font:700 14px 'Prompt';flex:none; }
.integration-icon.google { color:#4285f4;background:#edf4ff; }.integration-icon.line { color:#04a846;background:#eafff1; }.integration-icon.ai { color:#7d54df;background:#f1ebff; }.integration-icon.docs { color:#f1782a;background:#fff1e7; }
.integration-options { flex:1;min-width:0; }.integration-options b { display:block;font-size:12px; }.integration-options small { color:var(--muted);font-size:10.5px; }
.inline-switch,.tiny-switch { position:relative;display:inline-flex;align-items:center;gap:7px;cursor:pointer; }
.inline-switch input,.tiny-switch input,.setting-toggle input { appearance:none;width:42px;height:24px;border-radius:20px;background:#d9dee7;position:relative;cursor:pointer;transition:.2s;flex:none; }
.inline-switch input::after,.tiny-switch input::after,.setting-toggle input::after { content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:.2s; }
.inline-switch input:checked,.tiny-switch input:checked,.setting-toggle input:checked { background:#20a66a; }
.inline-switch input:checked::after,.tiny-switch input:checked::after,.setting-toggle input:checked::after { transform:translateX(18px); }
.modal-foot { display:flex;justify-content:flex-end;gap:8px;align-items:center;padding-top:12px;border-top:1px solid var(--line); }
.modal-foot .split { margin-right:auto; }
.google-event-info { padding:12px;border-radius:13px;background:#f5f8ff;color:#44546f;font-size:12px; }

/* reminder dashboard */
.hero-status,.hero-mini { position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(105px,1fr));gap:9px;flex:none; }
.hero-status>div,.hero-mini>div { padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07); }
.hero-status b,.hero-mini b { display:block;color:#fff;font:600 18px 'IBM Plex Mono'; }.hero-status span,.hero-mini span { color:#bac3d2;font-size:10px; }
.reminder-grid { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:18px;align-items:start; }
.timeline-list { position:relative;display:flex;flex-direction:column;gap:10px; }
.timeline-list::before { content:'';position:absolute;left:47px;top:8px;bottom:8px;width:1px;background:var(--line); }
.timeline-item { position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:15px;background:#fff; }
.timeline-date { text-align:center;position:relative;z-index:1;background:#fff; }.timeline-date b { display:block;font:600 15px 'IBM Plex Mono'; }.timeline-date span { font-size:9px;color:var(--muted); }
.timeline-body strong { display:block;font-size:12.5px; }.timeline-body small { color:var(--muted);font-size:10.5px; }.timeline-body p { margin:4px 0 0;font-size:11px; }
.health-row { display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line); }
.health-row:last-child { border-bottom:0; }.health-row b { display:block;font-size:12px; }.health-row small { color:var(--muted);font-size:10px; }
.health-icon { width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:#f2f4f7;color:#7d8798; }.health-icon.ok { background:#eaf8f1;color:#20a66a; }.health-icon.warn { background:#fff6e7;color:#d88913; }
.quota-box { padding:14px;border-radius:15px;background:#172033;color:#fff;margin-top:12px; }.quota-box>div { display:flex;justify-content:space-between;gap:10px;align-items:end; }.quota-box b { font:600 18px 'IBM Plex Mono'; }.quota-box span { color:#aeb8cb;font-size:10px; }
.quota-track { height:8px;margin-top:10px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden; }.quota-track i { display:block;height:100%;background:linear-gradient(90deg,#ff5b3a,#ff9c25);border-radius:inherit; }
.quick-actions { display:grid;grid-template-columns:repeat(2,1fr);gap:9px; }.quick-actions a,.quick-actions button { min-height:72px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:11px;color:var(--ink);text-align:left;cursor:pointer;text-decoration:none; }.quick-actions b { display:block;font-size:12px; }.quick-actions span { color:var(--muted);font-size:10px; }

/* token manager */
.token-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px; }
.token-card { position:relative;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#fff;padding:18px;box-shadow:var(--shadow); }
.token-card.is-default { border-color:#bde8ce;box-shadow:0 10px 30px rgba(31,166,105,.09); }.token-card.is-disabled { opacity:.62; }
.default-ribbon { position:absolute;right:-28px;top:16px;transform:rotate(38deg);background:#20a66a;color:#fff;padding:4px 34px;font:600 9px 'IBM Plex Mono'; }
.token-top { display:flex;align-items:center;gap:11px; }.token-top>div:nth-child(2) { flex:1;min-width:0; }.token-top h3 { margin:0;font-size:15px; }.token-top small { color:var(--muted);font-size:10.5px; }
.token-logo { width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#eafff1;color:#06ad4b;font:700 16px 'Prompt'; }
.token-meta { display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0; }.token-meta>div { padding:10px;border-radius:12px;background:#f7f8fa;min-width:0; }.token-meta b { display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.token-meta span { color:var(--muted);font-size:9.5px; }
.token-muted,.token-ok,.token-error { padding:9px 11px;border-radius:11px;font-size:10.5px;margin-bottom:12px; }.token-muted { background:#f4f5f7;color:var(--muted); }.token-ok { background:#eaf8f1;color:#168351; }.token-error { background:#fff0f0;color:#c63838; }
.token-actions { display:flex;gap:7px;flex-wrap:wrap; }.token-modal { width:min(720px,94vw); }

/* automation */
.automation-light { position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13); }
.automation-light>i { width:15px;height:15px;border-radius:50%;background:#7b8496;box-shadow:0 0 0 8px rgba(123,132,150,.12); }.automation-light.on>i { background:#38d187;box-shadow:0 0 0 8px rgba(56,209,135,.12),0 0 22px rgba(56,209,135,.55); }
.automation-light b { display:block;color:#fff; }.automation-light small { color:#b8c1d2;font-size:10px; }
.setting-toggle { display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 3px;border-bottom:1px solid var(--line);cursor:pointer; }.setting-toggle b { display:block;font-size:12.5px; }.setting-toggle small { display:block;color:var(--muted);font-size:10.5px; }
.compact-form { margin-top:15px; }.input-suffix { display:flex; }.input-suffix input { border-radius:13px 0 0 13px!important; }.input-suffix span { display:grid;place-items:center;padding:0 12px;border:1px solid var(--line);border-left:0;border-radius:0 13px 13px 0;background:#f5f6f8;color:var(--muted);font-size:11px; }
.cron-step { display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:13px 0;border-bottom:1px solid var(--line); }.cron-step>b { width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#fff0eb;color:#ed5234;font:600 11px 'IBM Plex Mono'; }.cron-step strong { display:block;font-size:12px;margin-bottom:6px; }.cron-step code { display:inline-block;padding:5px 9px;border-radius:8px;background:#172033;color:#fff;font:11px 'IBM Plex Mono'; }
.codebox { min-height:72px!important;background:#172033!important;color:#dbe4f5!important;border:0!important;font:10.5px/1.55 'IBM Plex Mono'!important;resize:vertical; }.copy-btn { margin-top:6px;border:0;border-radius:9px;padding:6px 10px;background:#eef1f5;color:#586276;font-size:10.5px;cursor:pointer; }

/* settings */
.settings-status { display:flex;gap:8px;position:relative;z-index:1; }.settings-status>div { display:flex;align-items:center;gap:7px;padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:#c4ccda;font-size:10.5px; }.settings-status i { width:8px;height:8px;border-radius:50%;background:#7c8494; }.settings-status i.ok { background:#40d68b;box-shadow:0 0 0 5px rgba(64,214,139,.12); }
.settings-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px; }.settings-card { margin:0!important; }.settings-card.google-settings,.settings-card.line-settings { grid-column:span 2; }
.settings-card-head { display:flex;align-items:center;gap:12px;margin-bottom:13px; }.settings-card-head>div:nth-child(2) { flex:1; }.settings-card-head h2 { margin:2px 0 0;font-size:17px; }
.connected-account { display:flex;align-items:center;gap:11px;padding:12px;margin:12px 0;border:1px solid #cfeadb;border-radius:14px;background:#f4fcf7; }.connected-account>div:nth-child(2) { flex:1;min-width:0; }.connected-account b { display:block;font-size:12px; }.connected-account span:not(.badge) { display:block;color:var(--muted);font-size:10.5px; }.connected-avatar { width:37px;height:37px;border-radius:12px;display:grid;place-items:center;background:#edf4ff;color:#4285f4;font:700 15px Arial; }.connected-avatar.line { background:#eafff1;color:#06ad4b; }
.settings-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:13px; }.line-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0; }.line-summary>div { padding:11px;border-radius:13px;background:#f7f8fa;min-width:0; }.line-summary b { display:block;font:600 13px 'IBM Plex Mono';white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.line-summary span { color:var(--muted);font-size:9.5px; }
.input-copy { display:flex;min-width:0; }.input-copy input { flex:1;min-width:0;border-radius:13px 0 0 13px!important; }.input-copy button { border:1px solid var(--line);border-left:0;border-radius:0 13px 13px 0;background:#f4f5f7;padding:0 13px;color:#596274;cursor:pointer; }
.sticky-save { position:sticky;bottom:16px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;padding:13px 16px;border:1px solid rgba(220,224,232,.9);border-radius:16px;background:rgba(255,255,255,.92);box-shadow:0 14px 40px rgba(23,32,51,.12);backdrop-filter:blur(14px); }.sticky-save b { display:block;font-size:12px; }.sticky-save span { color:var(--muted);font-size:10.5px; }

@media (max-width:1180px) {
  .calendar-layout,.reminder-grid { grid-template-columns:1fr; }
  .calendar-side { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
  .calendar-side .upcoming-card { grid-column:span 2; }
  .settings-grid { grid-template-columns:1fr; }.settings-card.google-settings,.settings-card.line-settings { grid-column:auto; }
}
@media (max-width:850px) {
  .calendar-hero,.reminder-hero,.token-hero,.automation-hero,.settings-hero { align-items:flex-start;flex-direction:column; }
  .calendar-source-summary,.hero-status,.hero-mini,.settings-status { width:100%; }
  .source-pill,.hero-status>div,.hero-mini>div { flex:1; }
  .calendar-toolbar { align-items:flex-start;flex-direction:column; }
  .calendar-actions { width:100%; }
  .calendar-side { grid-template-columns:1fr; }.calendar-side .upcoming-card { grid-column:auto; }
  .event-primary { grid-template-columns:repeat(2,1fr); }.event-primary .span-2 { grid-column:span 2; }
  .sticky-save { bottom:72px; }
}
@media (max-width:620px) {
  .calendar-source-summary,.hero-status,.hero-mini,.settings-status { display:grid;grid-template-columns:repeat(2,1fr); }
  .calendar-source-summary .source-pill { min-width:0; }
  .cal-modern { grid-template-columns:repeat(7,minmax(72px,1fr)); }
  .cal-modern .day { min-height:105px;padding:5px; }.cal-modern .ev { font-size:9.5px;padding:3px 4px; }
  .event-primary { grid-template-columns:1fr; }.event-primary .span-2 { grid-column:auto; }
  .integration-row { align-items:flex-start;flex-wrap:wrap; }.integration-row .inline-switch { margin-left:auto; }
  .token-grid { grid-template-columns:1fr; }.token-meta,.line-summary { grid-template-columns:1fr 1fr; }
  .settings-status { grid-template-columns:repeat(3,1fr); }.settings-status>div { justify-content:center;padding:8px 5px; }
  .sticky-save { align-items:stretch;flex-direction:column; }.sticky-save .btn { justify-content:center; }
  .timeline-item { grid-template-columns:38px minmax(0,1fr); }.timeline-item>.badge { grid-column:2;justify-self:start; }
}

/* v1.0.4 small utility components */
.cca-v103 .hero-status { display:block;min-width:235px; }
.cca-v103 .hero-status>div { display:flex;align-items:center;gap:12px; }
.cca-v103 .hero-status i { width:14px;height:14px;border-radius:50%;background:#818b9d;box-shadow:0 0 0 8px rgba(129,139,157,.12);flex:none; }
.cca-v103 .hero-status.ok i { background:#3bd388;box-shadow:0 0 0 8px rgba(59,211,136,.12),0 0 18px rgba(59,211,136,.45); }
.cca-v103 .hero-status span { display:block;color:inherit; }.cca-v103 .hero-status b { font:600 14px 'Prompt'; }.cca-v103 .hero-status small { display:block;color:#b8c2d3;font-size:10px; }
.cca-v103 .modal-foot.split { justify-content:space-between; }.cca-v103 .modal-foot.split>div { display:flex;gap:8px; }
.cca-v103 .icon-danger { width:32px;height:32px;border:0;border-radius:10px;background:var(--red-soft);color:var(--red);cursor:pointer; }
.cca-v103 .icon-danger::before { content:'×';font-size:18px; }
.cca-v103 .check-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0; }
.cca-v103 .switch-row { display:flex;align-items:center;gap:9px;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:#fafbfc;cursor:pointer;font-size:11.5px; }
.cca-v103 .switch-row input[type=checkbox]:not(.tiny-switch input):not(.inline-switch input) { width:17px;height:17px;accent-color:#20a66a; }
.cca-v103 .info-card { background:linear-gradient(135deg,#fff,#fafbfc); }
.cca-v103 .steps { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
.cca-v103 .steps>div { display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;padding:12px;border-radius:13px;background:#f7f8fa;color:var(--muted);font-size:11px; }
.cca-v103 .steps b { width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:#172033;color:#fff;font:600 10px 'IBM Plex Mono'; }
.cca-v103 .empty-card { grid-column:1/-1; }.cca-v103 .empty-card .empty-state { display:flex;align-items:center;flex-direction:column;gap:7px; }.cca-v103 .empty-card .empty-state span { font-size:11px; }
.cca-v103 .error-text { color:var(--red)!important; }
.cca-v103 .quota-box small { display:block;color:#aeb8cb;font-size:9.5px;margin-top:8px; }
.cca-v103 .token-meta>div { padding:9px 10px;border-radius:11px;background:#f7f8fa;min-width:0; }.cca-v103 .token-meta b { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.cca-v103 .token-meta span { color:var(--muted);font-size:9px; }
.cca-v103 .google-event-info>div { display:grid;grid-template-columns:90px minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px solid #dfe8f7; }.cca-v103 .google-event-info>div:last-child { border-bottom:0; }.cca-v103 .google-event-info b { font-size:11px; }.cca-v103 .google-event-info span { font-size:11px;white-space:pre-wrap; }
@media(max-width:620px){.cca-v103 .check-grid,.cca-v103 .steps{grid-template-columns:1fr}.cca-v103 .hero-status{width:100%;min-width:0}}

/* v1.0.4 form and integration status fixes */
.field-help-row { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;flex-wrap:wrap; }
.link-button { border:0;background:transparent;color:#ed5b35;padding:0;font:600 10.5px 'Noto Sans Thai';cursor:pointer; }
.link-button:hover { text-decoration:underline; }
.detected-uri { display:block;margin-top:5px;padding:7px 9px;border-radius:9px;background:#f6f7f9;color:#657084;font:10px/1.45 'IBM Plex Mono';overflow-wrap:anywhere; }
.connected-account small { display:block;color:var(--muted);font-size:9.5px;margin-top:2px; }
.connection-test-result { margin-top:10px;padding:10px 12px;border-radius:12px;font-size:11px; }
.connection-test-result.loading { background:#f3f5f8;color:var(--muted); }
.connection-test-result.ok { background:#eaf8f1;color:#168351; }
.connection-test-result.error { background:#fff0f0;color:#c63838; }
.btn[disabled], button[disabled] { opacity:.55;cursor:not-allowed;filter:none!important;box-shadow:none!important; }

/* CivilCodeAi 1.0.5 · Structural Design + project access */
.structural-hero{background:radial-gradient(circle at 85% 20%,rgba(56,189,248,.25),transparent 34%),linear-gradient(135deg,#071a2c,#102d42);color:#fff;border:1px solid rgba(125,211,252,.2)}
.structural-hero p{color:#bfd2df}.hero-actions{display:flex;gap:12px;align-items:center;margin-top:18px;flex-wrap:wrap}.metric-card{display:flex;flex-direction:column;gap:6px}.metric-card b{font:700 25px 'IBM Plex Mono',monospace;color:var(--ink)}.metric-card span{font-size:12px;color:var(--muted)}
.model-cards{display:grid;gap:10px}.model-card{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:16px;text-decoration:none;color:inherit}.model-card p{margin:5px 0 0;color:var(--muted);font-size:12px}.structural-thumb{height:54px;border-radius:12px;background:linear-gradient(145deg,#0f2c42,#164e63);display:grid;place-items:center;color:#67e8f9;font-size:28px}
.structural-studio{display:grid;grid-template-columns:280px minmax(420px,1fr) 290px;gap:12px;height:calc(100vh - 118px);margin:-8px}.struct-toolbox,.struct-properties{padding:16px;overflow:auto}.struct-canvas-wrap{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(#e9f4f7,#d7e6eb);box-shadow:inset 0 0 0 1px #bed0d7}.struct-canvas-wrap canvas{width:100%;height:100%;display:block}.struct-toolbar{position:absolute;z-index:2;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;align-items:center;background:rgba(7,24,37,.88);color:white;border:1px solid rgba(255,255,255,.12);padding:9px 12px;border-radius:12px;backdrop-filter:blur(12px)}.struct-toolbar>div{display:flex;gap:8px;align-items:center}.struct-toolbar button{border:0;background:#17364b;color:#d9edf5;border-radius:7px;padding:6px 9px;cursor:pointer}.live-dot{width:8px;height:8px;border-radius:99px;background:#2dd4bf;box-shadow:0 0 0 5px rgba(45,212,191,.15)}.axis-note{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.82);padding:6px 11px;border-radius:99px;font-size:11px;color:#526771}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0 18px}.tool{height:58px;border:1px solid var(--line);background:var(--panel);border-radius:11px;font-size:21px;color:var(--muted);cursor:pointer}.tool small{display:block;font-size:10px;margin-top:3px}.tool.active{background:#e6f9f6;color:#087f71;border-color:#5eead4}.selection-badge{padding:8px 10px;background:#e6f9f6;color:#087f71;border-radius:9px;font:600 12px 'IBM Plex Mono';margin-bottom:12px}.analysis-placeholder{margin-top:25px;border-top:1px solid var(--line);padding-top:18px}.analysis-placeholder span{font:600 10px 'IBM Plex Mono';color:#0e7490}.analysis-placeholder p{font-size:11px;color:var(--muted)}.fake-graph{height:75px;display:flex;align-items:end;gap:8px;padding:10px;background:linear-gradient(180deg,#effcff,#fff);border-radius:10px}.fake-graph i{display:block;flex:1;background:linear-gradient(#22d3ee,#0e7490);border-radius:5px 5px 2px 2px;animation:graphPulse 2.4s ease-in-out infinite}.fake-graph i:nth-child(1){height:35%}.fake-graph i:nth-child(2){height:72%}.fake-graph i:nth-child(3){height:50%}.fake-graph i:nth-child(4){height:85%}@keyframes graphPulse{50%{filter:saturate(1.5);transform:scaleY(.94)}}
.access-hero{background:linear-gradient(135deg,#f0fdfa,#ecfeff)}.access-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(480px,1fr));gap:14px}.access-card h2{margin:3px 0 13px}.access-row{display:grid;grid-template-columns:38px 1fr auto auto auto;gap:10px;align-items:center;border-top:1px solid var(--line);padding:10px 0}.access-who{display:flex;flex-direction:column}.access-who small{color:var(--muted);font-size:11px}.access-row label{font-size:12px;white-space:nowrap}
@media(max-width:1180px){.structural-studio{grid-template-columns:245px 1fr}.struct-properties{position:absolute;right:20px;top:150px;width:280px;max-height:70vh;z-index:4;box-shadow:var(--shadow)}}@media(max-width:760px){.structural-studio{display:block;height:auto;margin:0}.struct-canvas-wrap{height:520px;margin:12px 0}.struct-properties{position:static;width:auto;max-height:none}.access-grid{grid-template-columns:1fr}.access-row{grid-template-columns:36px 1fr auto}.access-row label{grid-row:2}.struct-toolbar{align-items:flex-start;gap:8px}.struct-toolbar>div:last-child{flex-wrap:wrap;justify-content:flex-end}}

/* v1.0.6 Notification Center */
.integration-icon.ai{background:#ede9fe;color:#6d4aff}.badge-red{background:#fff0f1;color:#d63747}.settings-card .setting-toggle{margin:12px 0}.source-logo.web{font-weight:800}.callout a{font-weight:700;color:inherit;text-decoration:underline}