/* ============================================================
   利益構造DX — Google工数削減 & 領域別ソリューション
   ============================================================ */

/* ============ GOOGLE 工数削減 ============ */
.gsave{ background:var(--bg); position:relative; }

.gsave-head{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:end; margin-bottom:clamp(34px,4vw,52px); }
.gsave-head .sec-head{ text-align:left; align-items:flex-start; margin:0; max-width:none; }
.gsave-head .sec-head .lead{ text-align:left; }
.gsave-total{ background:linear-gradient(160deg,var(--acc-deep),var(--acc-darker)); color:#fff; border-radius:var(--r-lg); padding:26px 30px; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); }
.gsave-total::after{ content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,oklch(0.55 0.13 var(--acc-h) / .7),transparent 70%); }
.gsave-total .k{ font-size:13px; color:oklch(1 0 0 / .72); letter-spacing:.04em; position:relative; z-index:1; }
.gsave-total .big{ font-family:var(--font-display); font-weight:700; font-size:clamp(40px,5.5vw,60px); line-height:1; margin:6px 0 2px; position:relative; z-index:1; }
.gsave-total .big small{ font-size:.36em; color:var(--acc-bright); margin-left:4px; }
.gsave-total .sub{ font-size:13.5px; color:oklch(1 0 0 / .8); position:relative; z-index:1; }
.gsave-total .sub b{ font-family:var(--font-display); color:var(--acc-bright); }

.gsave-list{ display:flex; flex-direction:column; gap:14px; }
.wrow{
  display:grid; grid-template-columns:248px 1fr 124px; align-items:center; gap:24px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 24px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.wrow:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--acc-tint-2); }
.wrow__task{ min-width:0; }
.wrow__task .tk{ font-size:15.5px; font-weight:700; line-height:1.3; white-space:nowrap; }
.wtools{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.gtool{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--ink-soft); background:var(--bg-soft); border:1px solid var(--line); padding:3px 9px 3px 7px; border-radius:999px; white-space:nowrap; }
.gtool .gd{ width:8px; height:8px; border-radius:50%; flex:none; }
.gd--sheets{ background:#1a8a5a; }
.gd--appsheet{ background:#3f7de0; }
.gd--script{ background:#e0a93f; }
.gd--looker{ background:#2f6bd6; }
.gd--forms{ background:#7b54d6; }
.gd--gmail{ background:#d64f3f; }

.wbar{ position:relative; height:38px; border-radius:9px; background:var(--bg-soft); overflow:hidden; border:1px solid var(--line-soft); }
.wbar__old{ position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding-right:14px; font-size:12px; color:var(--ink-faint); font-family:var(--font-display); }
.wbar__fill{ position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:8px; background:linear-gradient(90deg,var(--acc),var(--acc-deep)); display:flex; align-items:center; justify-content:flex-end; padding-right:11px; box-shadow:2px 0 12px oklch(0.55 0.13 var(--acc-h) / .3); }
.wbar__fill .nowh{ font-family:var(--font-display); font-size:12.5px; font-weight:700; color:#fff; white-space:nowrap; }
.anim-on .wbar__fill{ width:0; transition:width 1.1s var(--ease); }
.anim-on .reveal.is-in .wbar__fill{ width:var(--w); }
.wrow__cut{ text-align:right; }
.wrow__cut .pct{ font-family:var(--font-display); font-weight:700; font-size:38px; color:var(--acc-deep); line-height:1; letter-spacing:-.02em; }
.wrow__cut .lbl{ font-size:10.5px; color:var(--ink-faint); letter-spacing:.04em; margin-top:5px; }

/* donut variant row */
.wdonut{ display:flex; align-items:center; gap:26px; }
.donut{ position:relative; width:104px; height:104px; flex:none; }
.donut svg{ width:100%; height:100%; transform:rotate(-90deg); }
.donut__track{ fill:none; stroke:var(--line); stroke-width:9; }
.donut__arc{
  fill:none; stroke:url(#none); stroke:var(--acc); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:207.3; /* 2πr, r=33 */
  stroke-dashoffset:calc(207.3 - 207.3 * var(--p) / 100);
  filter:drop-shadow(0 3px 8px oklch(0.55 0.13 var(--acc-h) / .35));
}
.anim-on .donut__arc{ stroke-dashoffset:207.3; transition:stroke-dashoffset 1.2s var(--ease) .15s; }
.anim-on .reveal.is-in .donut__arc{ stroke-dashoffset:calc(207.3 - 207.3 * var(--p) / 100); }
.donut__c{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.donut__c b{ font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--acc-deep); line-height:1; }
.donut__c b small{ font-size:.55em; }
.donut__c span{ font-size:11px; color:var(--acc-deep); font-weight:700; letter-spacing:.02em; }
.donut-legend{ display:flex; flex-direction:column; gap:8px; min-width:0; flex:1; max-width:300px; }
.dlg{ display:flex; align-items:center; gap:9px; font-size:12.5px; }
.dlg__sw{ width:11px; height:11px; border-radius:3px; flex:none; }
.dlg__sw--save{ background:var(--acc); }
.dlg__sw--keep{ background:var(--line); }
.dlg__t{ color:var(--ink-soft); }
.dlg__n{ margin-left:auto; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink); white-space:nowrap; padding-left:18px; }
.dlg__n small{ font-size:.72em; color:var(--ink-faint); font-weight:500; }
/* emphasize the headline “削減できた工数” row */
.donut-legend .dlg:first-child{ font-size:13.5px; }
.donut-legend .dlg:first-child .dlg__t{ color:var(--acc-deep); font-weight:700; }
.donut-legend .dlg:first-child .dlg__sw{ width:13px; height:13px; }
.donut-legend .dlg:first-child .dlg__n{ font-size:16px; color:var(--acc-deep); }
.donut-legend .dlg:first-child .dlg__n small{ color:var(--acc); }
/* display order: 従来の合計 → 削減できた工数 → 残る作業時間 */
.donut-legend .dlg:nth-child(1){ order:2; } /* 削減できた工数 */
.donut-legend .dlg:nth-child(2){ order:3; } /* 残る作業時間 */
.donut-legend .dlg:nth-child(3){ order:1; } /* 従来の合計 */
.dlg--old{ padding-bottom:8px; margin-bottom:2px; border-bottom:1px dashed var(--line); }
.dlg--old .dlg__t{ color:var(--ink-faint); padding-left:20px; }
.dlg--old .dlg__n{ color:var(--ink-faint); }
@media (max-width:860px){
  .wdonut{ gap:18px; }
  .donut-legend{ flex:1; }
}

.gsave-note{ margin-top:20px; font-size:12px; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
.gsave-note svg{ width:14px; height:14px; flex:none; color:var(--acc); }

@media (max-width:860px){
  .gsave-head{ grid-template-columns:1fr; gap:26px; }
  .wrow{ grid-template-columns:1fr; gap:14px; padding:16px 18px; }
  .wrow__task .tk{ white-space:normal; }
  .wrow__cut{ display:flex; align-items:baseline; gap:8px; text-align:left; }
  .wrow__cut .lbl{ margin-top:0; }
}

/* ============ 領域別ソリューション（サンプルアプリ） ============ */
.niche{ background:var(--bg-soft); }
.niche-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ncard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ncard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.ncard__top{ display:flex; align-items:center; gap:14px; padding:24px 26px 0; }
.ncard__ic{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; background:linear-gradient(150deg,var(--acc-tint),var(--acc-tint-2)); color:var(--acc-deep); flex:none; }
.ncard__ic svg{ width:27px; height:27px; }
.ncard__ti{ min-width:0; }
.ncard__ti .dm{ font-size:19px; font-weight:700; line-height:1.2; }
.ncard__ti .tg{ font-size:12px; color:var(--ink-faint); margin-top:3px; }
.ncard__body{ padding:18px 26px 26px; display:flex; flex-direction:column; gap:18px; }
.ncard__pain{ font-size:13.5px; line-height:1.7; color:var(--ink-soft); }
.ncard__pain b{ color:var(--warn); font-weight:700; }

/* mini app mock */
.appmock{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--bg); box-shadow:var(--shadow-sm); }
.appmock__bar{ display:flex; align-items:center; gap:7px; padding:9px 13px; background:var(--acc-darker); }
.appmock__bar .dot3{ display:flex; gap:5px; }
.appmock__bar .dot3 i{ width:8px; height:8px; border-radius:50%; background:oklch(1 0 0 / .3); }
.appmock__bar .nm{ font-family:var(--font-display); font-size:10.5px; letter-spacing:.04em; color:oklch(1 0 0 / .75); margin-left:4px; }
.appmock__bar .badge{ margin-left:auto; font-size:9px; font-weight:700; letter-spacing:.06em; color:var(--acc-darker); background:var(--acc-bright); padding:3px 8px; border-radius:999px; }
.appmock__scr{ padding:14px; display:flex; flex-direction:column; gap:9px; }
.amrow{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line-soft); border-radius:9px; padding:9px 12px; }
.amrow .ck{ width:20px; height:20px; border-radius:6px; flex:none; display:grid; place-items:center; }
.amrow .ck svg{ width:12px; height:12px; }
.amrow .ck--ok{ background:var(--acc-tint-2); color:var(--acc-deep); }
.amrow .ck--wait{ background:var(--warn-tint); color:var(--warn); }
.amrow .am-t{ font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.amrow .am-s{ font-size:10.5px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.amrow .am-meta{ margin-left:auto; font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--acc-deep); white-space:nowrap; }
.amrow .am-meta.warn{ color:var(--warn); }
.amtxt{ display:flex; flex-direction:column; gap:1px; min-width:0; overflow:hidden; }

/* mini dashboard variant */
.amdash{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.amkpi{ background:var(--card); border:1px solid var(--line-soft); border-radius:9px; padding:10px 12px; }
.amkpi .k{ font-size:10px; color:var(--ink-faint); }
.amkpi .v{ font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--ink); line-height:1.1; margin-top:2px; }
.amkpi .v.up{ color:var(--acc-deep); }
.amkpi .v.down{ color:var(--warn); }
.ambars{ grid-column:1 / -1; display:flex; align-items:flex-end; gap:7px; height:56px; background:var(--card); border:1px solid var(--line-soft); border-radius:9px; padding:10px; }
.ambars i{ flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--acc),var(--acc-deep)); }
.ambars i.m{ background:var(--line); }

.ncard__foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:16px; border-top:1px dashed var(--line); }
.ntools{ display:flex; flex-wrap:wrap; gap:6px; }
.ncard__metric{ display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.ncard__metric b{ font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--acc-deep); line-height:1; }
.ncard__metric span{ font-size:12px; color:var(--ink-faint); }

.niche-foot{ text-align:center; margin-top:clamp(36px,4vw,52px); display:flex; flex-direction:column; align-items:center; gap:18px; }
.niche-foot p{ font-size:15px; color:var(--ink-soft); margin:0; max-width:560px; }
.niche-foot p b{ color:var(--ink); }

@media (max-width:820px){
  .niche-grid{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; }
}

/* ============ Founding partner callout ============ */
.founding{
  position:relative; overflow:hidden; margin-top:clamp(40px,5vw,64px);
  border-radius:var(--r-lg);
  background:linear-gradient(155deg, var(--acc-deep), var(--acc-darker) 70%);
  color:#fff; padding:clamp(34px,5vw,56px) clamp(26px,5vw,60px);
  text-align:center; box-shadow:var(--shadow-lg);
}
.founding::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(560px 280px at 88% -20%, oklch(0.6 0.13 var(--acc-h) / .55), transparent 60%),
    radial-gradient(460px 280px at 6% 120%, oklch(0.55 0.12 calc(var(--acc-h)+14) / .45), transparent 60%);
}
.founding::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(oklch(1 0 0 / .05) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / .05) 1px, transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
}
.founding > *{ position:relative; z-index:1; }
.founding__badge{
  display:inline-flex; align-items:center; gap:9px; margin:0 auto 22px;
  padding:8px 16px 8px 13px; border-radius:999px;
  background:var(--acc-bright); color:var(--acc-darker);
  font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
}
.founding__badge .ping{ position:relative; width:9px; height:9px; flex:none; }
.founding__badge .ping i{ position:absolute; inset:0; border-radius:50%; background:var(--acc-darker); }
.founding__badge .ping::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--acc-darker); opacity:.5; animation:fping 2s var(--ease) infinite; }
@keyframes fping{ 0%{ transform:scale(.6); opacity:.7; } 100%{ transform:scale(1.5); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .founding__badge .ping::after{ animation:none; } }

.founding__lead{ font-size:clamp(14px,1.6vw,16px); color:oklch(1 0 0 / .72); margin:0 0 14px; }
.founding__h{ font-size:clamp(26px,3.6vw,42px); font-weight:700; line-height:1.28; letter-spacing:-.01em; margin:0 auto; max-width:18em; text-wrap:balance; }
.founding__h .hot{ position:relative; white-space:nowrap; color:#fff; }
.founding__h .hot::after{ content:""; position:absolute; left:-.04em; right:-.04em; bottom:.06em; height:.34em; z-index:-1; border-radius:4px; background:linear-gradient(90deg, var(--acc), var(--acc-bright)); opacity:.55; }
.founding__sub{ font-size:clamp(14px,1.6vw,17px); color:#fff; font-weight:600; margin:20px auto 0; max-width:30em; }
.founding__sub b{ color:var(--acc-bright); }
.founding__meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; margin:26px 0 30px; }
.founding__chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:oklch(1 0 0 / .1); border:1px solid oklch(1 0 0 / .2); font-size:13px; font-weight:600; backdrop-filter:blur(6px); }
.founding__chip svg{ width:15px; height:15px; color:var(--acc-bright); flex:none; }
.founding__cta{ display:inline-flex; }
.founding__note{ margin:16px 0 0; font-size:12px; color:oklch(1 0 0 / .58); }
@media (max-width:560px){ .founding__meta{ gap:8px; } .founding__chip{ padding:8px 13px; font-size:12px; } }

/* ============ 脱アナログ 業務フローカード ============ */
.flow-grid{ display:flex; flex-direction:column; gap:20px; }
.fcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 30px 24px; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.fcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.fcard__head{ display:flex; align-items:center; gap:15px; margin-bottom:22px; }
.fcard__ic{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; background:var(--warn-tint); color:var(--warn); flex:none; }
.fcard__ic svg{ width:27px; height:27px; }
.fcard__ti{ min-width:0; }
.fcard__ti .dm{ font-size:20px; font-weight:700; line-height:1.2; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fcard__ti .leg{ font-family:var(--font-display); font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--warn); background:var(--warn-tint); padding:3px 9px; border-radius:999px; }
.fcard__ti .tg{ font-size:13px; color:var(--ink-soft); margin-top:5px; }

.fgrid{ display:grid; grid-template-columns:minmax(0,1fr) 132px minmax(0,360px); gap:10px; align-items:center; }

/* the legacy workflow as vertical steps */
.flow{ display:flex; flex-direction:column; gap:11px; }
.fstep{ position:relative; display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:11px; background:linear-gradient(150deg,var(--acc-deep),var(--acc-darker)); border:1px solid var(--acc-darker); }
.fstep:not(:first-child)::before{ content:""; position:absolute; top:-11px; left:26px; width:2px; height:11px; background:oklch(1 0 0 / .28); z-index:2; }
.fstep .fn{ width:23px; height:23px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--font-display); font-size:12px; font-weight:600; background:oklch(1 0 0 / .16); border:1px solid oklch(1 0 0 / .32); color:#fff; position:relative; z-index:1; }
.fstep .fl{ font-size:13.5px; font-weight:600; line-height:1.35; color:#fff; position:relative; z-index:1; }
.fstep .ftag{ margin-left:auto; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; flex:none; position:relative; z-index:1; }
.fstep--keep .ftag{ color:#fff; background:oklch(1 0 0 / .16); border:1px solid oklch(1 0 0 / .32); }
.fstep--solved .fl{ text-decoration:line-through; text-decoration-color:currentColor; text-decoration-thickness:1.6px; }

/* solved box drawn as a fadeable ::after layer so the stamp can stay solid */
.fstep--solved{ background:transparent; border-color:transparent; }
.fstep--solved::after{ content:""; position:absolute; inset:0; border-radius:11px; background:linear-gradient(150deg,var(--acc-deep),var(--acc-darker)); border:1px solid var(--acc-darker); z-index:0; }

/* the “不要” rubber stamp — solid dark green, stays sharp after the fade */
.fstep--solved .ftag{ background:var(--acc-deep); color:#fff; border:1.6px solid #fff; border-radius:6px; padding:4px 11px; transform:rotate(-7deg); box-shadow:0 5px 14px oklch(0.3 0.05 162 / .35); font-size:11.5px; font-weight:800; letter-spacing:.16em; font-family:var(--font-display); display:inline-block; }
.fstep--solved .ftag::before{ content:""; position:absolute; inset:2px; border:1px solid oklch(1 0 0 / .6); border-radius:4px; }

/* stagger delays (inherited by children) */
.flow .fstep:nth-child(2){ --d:.2s; }
.flow .fstep:nth-child(3){ --d:.45s; }
.flow .fstep:nth-child(4){ --d:.7s; }

/* FADE FLOW — resting/print = faint end-state (box pale, text grey, stamp solid dark) */
.fstep--solved::after{ opacity:.16; }
.fstep--solved .fn{ background:var(--card); border-color:var(--line); color:var(--ink-faint); }
.fstep--solved .fl{ color:var(--ink-faint); }
/* initial under anim-on: full dark-green box, white text, white-outline stamp */
.anim-on .fstep--solved::after{ opacity:1; transition:opacity .65s var(--ease) var(--d,0s); }
.anim-on .fstep--solved .fn{ background:oklch(1 0 0 / .16); border-color:oklch(1 0 0 / .32); color:#fff; transition:background .65s var(--ease) var(--d,0s), border-color .65s var(--ease) var(--d,0s), color .65s var(--ease) var(--d,0s); }
.anim-on .fstep--solved .fl{ color:#fff; transition:color .65s var(--ease) var(--d,0s); }
.anim-on .fstep--solved .ftag{ background:transparent; border-color:oklch(1 0 0 / .9); box-shadow:none; transition:background .65s var(--ease) var(--d,0s), border-color .65s var(--ease) var(--d,0s), box-shadow .65s var(--ease) var(--d,0s); }
/* after scroll-in: box fades, text greys, stamp turns solid dark & sharp */
.anim-on .reveal.is-in .fstep--solved::after{ opacity:.16; }
.anim-on .reveal.is-in .fstep--solved .fn{ background:var(--card); border-color:var(--line); color:var(--ink-faint); }
.anim-on .reveal.is-in .fstep--solved .fl{ color:var(--ink-faint); }
.anim-on .reveal.is-in .fstep--solved .ftag{ background:var(--acc-deep); border-color:#fff; box-shadow:0 5px 14px oklch(0.3 0.05 162 / .35); }

/* connector to the app */
.fsolve{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; }
.fsolve__arrow{ width:48px; height:48px; border-radius:50%; background:linear-gradient(150deg,var(--acc),var(--acc-deep)); color:#fff; display:grid; place-items:center; box-shadow:0 8px 20px oklch(0.55 0.13 var(--acc-h) / .35); }
.fsolve__arrow svg{ width:24px; height:24px; }
.fsolve__t{ font-size:11px; font-weight:700; color:var(--acc-deep); text-align:center; line-height:1.45; }

.fcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:18px; margin-top:22px; border-top:1px dashed var(--line); }

@media (max-width:880px){
  .fgrid{ grid-template-columns:1fr; gap:8px; }
  .fsolve{ flex-direction:row; gap:12px; padding:6px 0; }
  .fsolve__arrow{ transform:rotate(90deg); }
  .fsolve__t br{ display:none; }
}

/* ============ native-app style screen ============ */
.appui{ width:100%; max-width:296px; margin-inline:auto; border-radius:24px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-lg); overflow:hidden; }
.appui__status{ display:flex; align-items:center; justify-content:space-between; padding:9px 18px 3px; font-size:11.5px; font-weight:700; font-family:var(--font-display); color:#fff; }
.appui__status .sig{ display:inline-flex; align-items:center; gap:5px; }
.appui__status .sig svg{ height:11px; width:auto; display:block; }
.appui__head{ padding:4px 16px 14px; color:#fff; display:flex; align-items:center; gap:11px; }
.appui--green .appui__status, .appui--green .appui__head{ background:linear-gradient(160deg,var(--acc),var(--acc-deep)); }
.appui__back{ width:28px; height:28px; border-radius:9px; background:oklch(1 0 0 / .16); display:grid; place-items:center; flex:none; }
.appui__back svg{ width:15px; height:15px; }
.appui__htxt{ min-width:0; flex:1; }
.appui__title{ font-size:14.5px; font-weight:700; line-height:1.2; display:block; }
.appui__sub{ font-size:10.5px; opacity:.82; margin-top:2px; display:block; }
.appui__badge{ font-size:8.5px; font-weight:700; letter-spacing:.08em; background:oklch(1 0 0 / .2); padding:3px 8px; border-radius:999px; flex:none; }
.appui__body{ padding:13px; display:flex; flex-direction:column; gap:9px; background:var(--bg); }

.ui-banner{ display:flex; gap:8px; align-items:center; background:var(--acc-tint); border:1px solid var(--acc-tint-2); border-radius:11px; padding:8px 11px; font-size:10.5px; line-height:1.4; color:var(--acc-deep); font-weight:700; }
.ui-banner svg{ width:15px; height:15px; flex:none; }

.ui-card{ background:var(--card); border:1px solid var(--line); border-radius:13px; padding:11px 13px; }
.ui-card__t{ font-size:12.5px; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.ui-card__t .dotg{ width:8px; height:8px; border-radius:50%; background:var(--acc); flex:none; }
.ui-photos{ display:flex; gap:6px; margin-bottom:9px; }
.ui-thumb{ width:46px; height:46px; border-radius:9px; background:repeating-linear-gradient(135deg, oklch(0.9 0.02 162) 0 6px, oklch(0.94 0.015 162) 6px 12px); display:grid; place-items:center; color:var(--ink-faint); }
.ui-thumb svg{ width:18px; height:18px; }
.ui-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11.5px; padding:6px 0; border-bottom:1px solid var(--line-soft); }
.ui-row:last-child{ border-bottom:0; }
.ui-row .l{ color:var(--ink-faint); }
.ui-row .v{ font-weight:700; color:var(--ink); white-space:nowrap; }
.ui-row .v.ok{ color:var(--acc-deep); }

.ui-auto{ display:flex; align-items:center; gap:11px; background:linear-gradient(150deg,var(--acc-deep),var(--acc-darker)); color:#fff; border-radius:12px; padding:11px 13px; }
.ui-auto .ico{ width:32px; height:32px; border-radius:9px; background:oklch(1 0 0 / .14); display:grid; place-items:center; flex:none; }
.ui-auto .ico svg{ width:17px; height:17px; color:var(--acc-bright); }
.ui-auto .tx{ min-width:0; }
.ui-auto .tx .k{ font-size:9.5px; opacity:.82; display:block; }
.ui-auto .tx .v{ font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1.15; display:block; }
.ui-auto .tag{ margin-left:auto; font-size:8.5px; font-weight:700; background:var(--acc-bright); color:var(--acc-darker); padding:3px 8px; border-radius:999px; flex:none; }

.ui-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.ui-pill{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; padding:5px 10px; border-radius:999px; }
.ui-pill svg{ width:11px; height:11px; }
.ui-pill--ok{ background:var(--acc-tint-2); color:var(--acc-deep); }
.ui-pill--mute{ background:var(--bg-soft); color:var(--ink-faint); border:1px solid var(--line); }

/* mini timeline for the ticket screen */
.ui-tl{ display:flex; flex-direction:column; gap:0; }
.ui-tl__i{ display:flex; align-items:center; gap:10px; font-size:11px; padding:5px 0; position:relative; }
.ui-tl__d{ width:16px; height:16px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--acc); color:#fff; }
.ui-tl__d svg{ width:9px; height:9px; }
.ui-tl__i:not(:last-child)::after{ content:""; position:absolute; left:7.5px; top:21px; width:1.5px; height:11px; background:var(--acc-tint-2); }
.ui-tl__i .tx{ color:var(--ink-soft); }
.ui-tl__i .tx b{ color:var(--ink); }

/* mini dashboard reuse inside appui */
.appui .amdash{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.appui .amkpi{ background:var(--card); border:1px solid var(--line); border-radius:11px; padding:9px 11px; }
.appui .amkpi .k{ font-size:9.5px; color:var(--ink-faint); }
.appui .amkpi .v{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); margin-top:2px; }
.appui .amkpi .v.up{ color:var(--acc-deep); }
.appui .ambars{ grid-column:1 / -1; display:flex; align-items:flex-end; gap:6px; height:52px; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:9px; }
.appui .ambars i{ flex:1; border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--acc),var(--acc-deep)); }
.appui .ambars i.m{ background:var(--line); }