/* PMeeting — design tokens + shared components.
   Direction (2026-11-12): the POffice (SacomWork) design language, so moving from POffice
   into a meeting feels like one product — deep green brand + metallic gold as a SMALL accent,
   pale-green canvas, white cards with the 3-step POffice shadows (--e1/--e2/--e3), radius
   18/12, Plus Jakarta Sans headings + Inter body (self-hosted, static/fonts). Gold is only an
   accent (lines, dots, logo, gradients behind dark text) — never a fill under small white text.
   See docs/DESIGN.md for the rules every page follows.

   The five admin-configurable colours arrive from the server as an inline :root block
   (--bg, --card, --brand-blue, --accent, --accent-2) and override the defaults below.
   Everything else (soft tints, hover shades, the brand gradient) is DERIVED from them so a
   custom accent still looks coherent. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:200 800;src:url(../fonts/plus-jakarta-sans-vietnamese-wght-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:200 800;src:url(../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:200 800;src:url(../fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-vietnamese-wght-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  /* surfaces (POffice --bg/--surface/--line) */
  --bg:#F3F8F4;            /* app canvas: pale green */
  --card:#FFFFFF;          /* cards, inputs, popovers */
  --bg-2:#E8F1EB;          /* alternate band / subtle fill (chips, icon wells, segmented tabs) */
  --line:#D3E2D8;          /* hairline borders (decorative dividers, card edges) */
  --line-strong:#BCD2C4;   /* ghost-button / emphasised decorative borders */
  --border-input:#6F8A7C;  /* form-control boundary: >= 3:1 on white AND on --bg-2 (WCAG 1.4.11) */
  --bg-hover:#DDEBE2;      /* hover fill of light controls */
  --placeholder:#5F7569;   /* input placeholder (4.6:1 on white) */

  /* brand: deep green (admin-configurable) + metallic gold accent (fixed) */
  --brand-blue:#0E7A52;    /* name kept: it is the admin "brand colour" slot */
  --accent:#0E7A52;
  --accent-2:#0B5C3E;      /* links / accent text on light surfaces */
  --accent-hover:color-mix(in srgb,var(--accent) 82%,#000);
  --accent-soft:color-mix(in srgb,var(--accent) 8%,#fff);
  --accent-line:color-mix(in srgb,var(--accent) 26%,#fff);
  --on-accent:#FFFFFF;
  /* POffice --grad-brand, derived from the accent; the light end still gives white text >= 4.5:1 */
  --grad-brand:linear-gradient(135deg,color-mix(in srgb,var(--accent) 94%,#fff) 0%,var(--accent-hover) 100%);
  --gold:#D4AF37; --gold-2:#876305; --gold-l:#FFE9A8;
  --grad-gold:linear-gradient(135deg,#FFF3C4 0%,#F1D270 32%,#D4AF37 64%,#B8860B 100%);

  /* text (POffice --ink/--muted) */
  --ink:#10382A; --ink-2:#2B4A3D; --ink-3:#3B5548; --muted:#4F675B;
  /* the "dark" button: POffice navy-green */
  --dark:#0C3325; --dark-hover:#145139;
  /* deep surfaces (landing editorial band, auth side panel) + text on them */
  --deep-2:#0A4A33; --deep-3:#0B5C3E; --on-dark:#CFE3D8; --on-dark-2:#B8D3C5;
  --grad-deep:linear-gradient(150deg,var(--dark) 0%,var(--deep-2) 55%,var(--deep-3) 100%);
  /* meeting room / webinar surfaces (room.css, watch.html) */
  --room-bg:#EEF6F0; --room-panel2:#EAF3ED; --room-line:#D9E7DE; --room-chip:#E3EEE7;

  /* status */
  --danger:#C92A2A; --danger-soft:#FDECEC;
  --success:#0B6B47; --success-soft:#E7F5EE;
  --warn:#946200; --warn-soft:#FFF7DD;

  /* elevation: POffice 3-step green-tinted shadows (r,g,b so the tint follows the brand) */
  --shadow-rgb:8,40,28;
  --e1:0 1px 2px rgba(var(--shadow-rgb),.06),0 2px 6px rgba(var(--shadow-rgb),.05);
  --e2:0 6px 16px -6px rgba(var(--shadow-rgb),.16),0 12px 30px -10px rgba(var(--shadow-rgb),.10);
  --e3:0 18px 34px -10px rgba(var(--shadow-rgb),.22),0 34px 60px -18px rgba(var(--shadow-rgb),.20);
  --shadow-sm:var(--e1);
  --shadow:var(--e2);
  --shadow-lift:var(--e3);
  --shadow-lg:var(--e3);
  --shadow-inset-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --glow:0 10px 24px -8px color-mix(in srgb,var(--accent) 55%,transparent);
  --radius:18px; --radius-sm:12px; --radius-pill:999px;
  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  --font-h:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .4em;letter-spacing:-.02em;color:var(--ink);font-weight:700;font-family:var(--font-h)}
.container{width:min(1180px,92vw);margin:0 auto}
/* kept as plain emphasis: old markup wraps brand words in these spans */
.gradient-text,.blue-text{color:var(--accent);background:none;-webkit-text-fill-color:currentColor}
/* POffice .goldtext: metallic gold text — only for large words on a DARK surface (fails contrast on light) */
.goldtext{background:linear-gradient(110deg,#F6D36B,#FFE9A8,#F1C94E,#FFF6D6,#F1C94E,#F6D36B);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:goldshine 4s linear infinite}
@keyframes goldshine{to{background-position:220% center}}
@media(prefers-reduced-motion:reduce){.goldtext{animation:none}}

/* icons: <svg class="i"><use href="/static/img/icons.svg#mic"/></svg> — stroke follows text colour */
.i{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em}
.i-sm{width:1em;height:1em}.i-lg{width:1.5em;height:1.5em}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  font-weight:650;font-size:.94rem;line-height:1.2;padding:.72rem 1.25rem;min-height:44px;border-radius:var(--radius-sm);border:1px solid transparent;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .2s,transform .2s;white-space:nowrap;font-family:inherit;text-decoration:none}
.btn:hover{text-decoration:none}
.btn:focus-visible,.input:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary,.btn-blue{background:var(--accent);background-image:var(--grad-brand);color:var(--on-accent);box-shadow:var(--glow)}
.btn-primary:hover,.btn-blue:hover{background:var(--accent-hover);background-image:none;color:var(--on-accent);transform:translateY(-1px)}
.btn-ghost{background:var(--card);border-color:var(--line);color:var(--ink);box-shadow:var(--e1)}
.btn-ghost:hover{background:var(--card);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--e2)}
@media(prefers-reduced-motion:reduce){.btn:hover{transform:none}}
/* POffice navy-green — the main action on app pages */
.btn-dark{background:var(--dark);border-color:var(--dark);color:#fff;box-shadow:var(--e2),inset 0 1px 0 rgba(255,255,255,.12)}
.btn-dark:hover{background:var(--dark-hover);border-color:var(--dark-hover);color:#fff}
.btn-soft{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent-line)}
.btn-soft:hover{background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent-2)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:color-mix(in srgb,var(--danger) 86%,#000);color:#fff}
.btn-lg{padding:.9rem 1.6rem;min-height:50px;font-size:1rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* inputs */
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.field label{font-size:.86rem;font-weight:600;color:var(--ink-2)}
.input,select.input,textarea.input{width:100%;padding:.72rem .95rem;min-height:46px;border:1px solid var(--border-input);border-radius:var(--radius-sm);
  font-size:.97rem;font-family:inherit;background:var(--card);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.input:hover{border-color:var(--muted)}
.input::placeholder{color:var(--placeholder)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.input:disabled{opacity:.55;cursor:not-allowed;background:var(--bg-2)}
select.input option{background:var(--card);color:var(--ink)}

/* pills / badges */
.pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:600;
  padding:.22rem .62rem;border-radius:999px;background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line)}
.badge-live{background:var(--danger-soft);color:var(--danger);border-color:#F6C9C9}
.badge-webinar{background:#FFF7DD;color:#6B4E00;border-color:#F1D270}
.badge-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,45,32,.45)}70%{box-shadow:0 0 0 6px rgba(217,45,32,0)}100%{box-shadow:0 0 0 0 rgba(217,45,32,0)}}
.badge-webinar .badge-dot{animation:pulseGold 1.8s infinite}
@keyframes pulseGold{0%{box-shadow:0 0 0 0 rgba(135,99,5,.45)}70%{box-shadow:0 0 0 6px rgba(135,99,5,0)}100%{box-shadow:0 0 0 0 rgba(135,99,5,0)}}

/* cards: white surface, hairline edge, layered shadow. .card-hover adds a small lift for clickable cards. */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow),var(--shadow-inset-hi)}
/* POffice .card.hover: a gold rule grows along the top edge */
.card-hover{position:relative}
.card-hover::before{content:"";position:absolute;top:0;left:22px;right:22px;height:3px;border-radius:3px;background:var(--grad-gold);opacity:0;transform:scaleX(.3);transform-origin:left;transition:opacity .3s,transform .35s;pointer-events:none}
.card-hover:hover::before{opacity:1;transform:scaleX(1)}
.card-hover{transition:transform .18s ease,box-shadow .18s ease,border-color .18s}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift),var(--shadow-inset-hi);border-color:var(--line-strong)}
@media(prefers-reduced-motion:reduce){.card-hover,.card-hover:hover{transition:none;transform:none}}

/* banners: a full-width message band. Solid fills only (text contrast is checked in admin). */
.banner{display:flex;align-items:center;gap:1.25rem;padding:1.25rem 1.5rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.banner h2,.banner h3{margin:0 0 .25rem}
.banner p{margin:0;color:var(--ink-2)}
.banner-body{flex:1;min-width:0}
.banner-brand{background:var(--accent);background-image:var(--grad-brand);border-color:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-lift)}
.banner-brand h2,.banner-brand h3,.banner-brand p{color:var(--on-accent)}
.banner-brand p{opacity:.92}
.banner-soft{background:var(--accent-soft);border-color:var(--accent-line);box-shadow:var(--shadow-sm)}
.banner-info{background:var(--accent-soft);border-color:var(--accent-line);box-shadow:none}
.banner-warn{background:var(--warn-soft);border-color:#F1D270;box-shadow:none}
.banner-warn p,.banner-warn h3{color:#5C3D00}
.banner-brand .btn-primary{background:#fff;color:var(--accent-2)}
.banner-brand .btn-primary:hover{background:var(--accent-soft);color:var(--accent-2)}
.banner-brand .btn-ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.banner-brand .btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
@media(max-width:640px){.banner{flex-direction:column;align-items:flex-start}}

/* 3-D helpers. Depth comes from perspective, a top highlight and layered contact shadows — not from colour effects.
   .persp wraps a scene; .tilt-3d rotates the object inside it (flat on phones / reduced motion). */
.persp{perspective:1600px;perspective-origin:50% 40%}
.tilt-3d{transform:rotateX(7deg) rotateY(-14deg) rotateZ(1.2deg);transform-style:preserve-3d;transition:transform .4s ease}
.tilt-3d:hover{transform:rotateX(3deg) rotateY(-7deg) rotateZ(.6deg)}
@media(max-width:820px),(prefers-reduced-motion:reduce){.tilt-3d,.tilt-3d:hover{transform:none}}
/* icon well: a soft rounded square holding a line icon (the reference's .fact-icon). Flat — no gradient. */
.tile-3d{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--accent-soft);
  border:0;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)}
.tile-3d.neutral{background:var(--bg-2);color:var(--ink-2)}

/* eyebrow: small uppercase label with a gold dot (POffice .nav-sec) */
.eyebrow{display:flex;align-items:center;gap:.6rem;margin:0 0 .8rem;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:500;color:var(--muted)}
.eyebrow{font-weight:700;color:var(--muted)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--grad-gold);box-shadow:0 1px 2px rgba(135,99,5,.45);flex:none}

/* toast */
.toast-wrap{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;flex-direction:column;gap:.5rem;align-items:center}
.toast{background:var(--dark);color:#fff;padding:.8rem 1.2rem;border-radius:14px;box-shadow:var(--shadow-lg);font-size:.9rem;
  animation:toastIn .2s ease;max-width:90vw}
.toast.err{background:var(--danger)}
.toast.ok{background:var(--success)}
@keyframes toastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* utility */
/* generic hide — must beat component display (e.g. .chat-input{display:flex},
   .dotbadge{display:grid}); without !important the bare `hidden` class did nothing. */
.hidden{display:none !important}
.row{display:flex;gap:1rem}.wrap{flex-wrap:wrap}.center{align-items:center}.between{justify-content:space-between}
.spinner{width:20px;height:20px;border:2.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* language switcher (static/js/i18n.js fills <span data-lang-slot>) */
.lang-sel{font:inherit;font-size:.85rem;padding:.45rem .7rem;min-height:38px;border:1px solid var(--border-input);border-radius:var(--radius-pill);background:var(--card);color:var(--ink);cursor:pointer;max-width:9rem}
.lang-sel:hover{border-color:var(--muted)}

/* CJK: break lines between phrases, not in the middle of a word ("オンライ/ン会議"); balance headings. */
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3,:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,:lang(ko) h1,:lang(ko) h2,:lang(ko) h3{word-break:auto-phrase;text-wrap:balance}
:lang(ja) body,:lang(zh) body{line-break:strict}
:lang(ko) body{word-break:keep-all}