@font-face { font-family:Manrope; font-style:normal; font-weight:400 600; font-display:swap; src:url('fonts/Manrope-Variable.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/IBMPlexMono-Regular.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/IBMPlexMono-Medium.ttf') format('truetype'); }
/* Companion : quatre espaces, les mêmes outils sur téléphone et ordinateur. */
:root { color-scheme: light; --bg:#F6F5F1; --surface:#FFFFFF; --raised:#ECEEE8; --line:#D2D8CF; --ink:#252B2B; --muted:#626A63; --accent:#E8603C; --accent-text:#A63D24; --on-accent:#141414; --font-sans:Manrope,system-ui,sans-serif; --font-mono:"IBM Plex Mono",monospace; }
body { background:var(--bg); color:var(--ink); padding:0 0 calc(92px + env(safe-area-inset-bottom)); font-family:var(--font-sans); font-size:15px; line-height:1.75; }
strong,b { font-weight:600; }
button,input,select,textarea { font:inherit; }
button { touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--accent-text); outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.5; }
.c-icon { width:21px; height:21px; flex-shrink:0; vertical-align:middle; }
.inline-icon { display:inline-flex; vertical-align:-4px; }
.inline-icon .c-icon { width:17px; height:17px; }
#app-header { background:var(--bg); border-bottom:1px solid var(--line); padding:16px 20px; gap:14px; min-height:77px; }
.brand { display:flex; align-items:center; min-width:0; }
.companion-wordmark { display:block; width:176px; max-width:100%; height:auto; }
.brand .companion-wordmark { width:164px; }
.account-button { margin-left:auto; display:flex; align-items:center; gap:9px; padding:9px; background:var(--surface); border:1px solid var(--line); border-radius:50%; color:var(--ink); }
.account-button .account-label { display:none; }
#back-btn { font-size:0; padding:8px; color:var(--ink); }
#back-btn .c-icon { width:20px; }
.mode-pill { font-size:10px; color:#A43336; background:#e8603c14; border:1px solid #D2D8CF; border-radius:30px; padding:4px 9px; white-space:nowrap; }
#mode-badge { display:none; }
#workspace-heading { padding:28px 20px 22px; }
.eyebrow { color:var(--accent); font-size:10px; text-transform:uppercase; letter-spacing:2px; font-weight:600; margin-bottom:10px; }
h1 { font-family:Manrope,system-ui,sans-serif; font-size:34px; font-weight:400; letter-spacing:-1.2px; line-height:1.15; }
#page-description { color:var(--muted); font-size:13px; margin-top:9px; max-width:620px; }
.preview-note { margin:0 20px 8px; padding:11px 13px; border:1px solid var(--line); border-radius:9px; color:var(--muted); font-size:11px; display:flex; align-items:center; gap:10px; }
.preview-note strong { color:var(--ink); }
.preview-note .c-icon { width:17px; color:var(--accent); }
#section-nav { display:flex; gap:5px; margin:0 20px 18px; padding:5px; border:1px solid var(--line); border-radius:11px; background:var(--surface); }
.section-tab { display:flex; gap:8px; justify-content:center; align-items:center; flex:1; border:0; color:var(--muted); background:transparent; padding:11px 8px; border-radius:7px; font-size:12px; }
.section-tab.active { background:var(--ink); color:var(--bg); font-weight:600; }
.section-tab .c-icon { width:17px; }
.tabbar { background:#F6F5F1F5; border-top:1px solid var(--line); padding:7px 8px calc(7px + env(safe-area-inset-bottom)); z-index:40; gap:4px; backdrop-filter:blur(16px); }
.tab { min-height:57px; padding:8px 4px; border-radius:9px; color:var(--muted); font-size:10px; gap:5px; }
.tab-icon { display:flex; }
.tab.active { color:var(--accent); background:#e8603c12; }
.nav-brand,.nav-footer,.nav-caption { display:none; }
.create-row { padding:12px 20px 20px; gap:9px; }
.create-row input { background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:13px; min-width:0; }
.create-row button { display:flex; align-items:center; gap:7px; background:var(--accent); color:#141414; padding:12px 15px; border-radius:9px; white-space:nowrap; }
.filter-row { padding:0 20px 20px; }
.filter-row select { background:var(--surface); border:1px solid var(--line); color:var(--ink); padding:12px; border-radius:9px; }
.list-header { padding:24px 20px 12px; }
h2 { color:var(--muted); font-size:10px; letter-spacing:1.8px; padding:25px 20px 12px; }
.list { gap:10px; padding:0 20px; }
.card,.roll-card { border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:20px; gap:12px; }
.card:hover { border-color:#D2D8CF; background:#FFFFFF; }
.card-name { font-size:16px; font-weight:600; letter-spacing:-.25px; }
.card-sub { color:var(--muted); font-size:12px; margin-top:6px; }
.card-stats { display:flex; gap:6px; align-items:center; color:#626A63; font-size:12px; margin-top:15px; }
.event-card { display:grid; grid-template-columns:1fr auto; position:relative; min-height:155px; align-items:start; }
.event-card-content { display:flex; gap:12px; min-width:0; }
.event-card .card-name { max-width:100%; }
.event-card .badge { font-size:10px; font-weight:600; padding:5px 9px; white-space:nowrap; }
.event-card .chevron { position:absolute; right:20px; bottom:19px; }
#templates-list .card { flex-direction:column; align-items:stretch; }
#templates-list .card > div:last-child { align-self:flex-end; }
#templates-list .card > div:first-child { min-height:80px; }
.event-date { font-size:11px; color:var(--muted); margin-bottom:7px; letter-spacing:.2px; }
.badge-active { background:#F6F5F1F5; color:#626A63; }
.badge-upcoming { background:#b8965220; color:#252B2B; }
.badge-completed { background:#ffffff09; color:var(--muted); }
.chevron { color:var(--muted); }
.section-card { margin:0 20px 18px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
.section-card-header { padding:22px 20px 16px; border-bottom:1px solid var(--line); }
.section-card-header h3 { font-family:Manrope,system-ui,sans-serif; font-size:22px; font-weight:400; letter-spacing:-.4px; }
.section-card-header p,.helper-text { color:var(--muted); font-size:12px; margin-top:5px; }
.field,.toggle-row { background:transparent; border-bottom:1px solid #D2D8CF; padding:16px 20px; }
.field label { color:var(--muted); font-size:11px; text-transform:none; letter-spacing:0; }
.field input,.field select,.field textarea,.roll-select { background:var(--bg); color:var(--ink); border:1px solid var(--line); padding:12px; border-radius:8px; min-width:0; }
.field-grid-2 { background:transparent; gap:0; }
.counter-row button,.preset-btn,.selection-bar button,.tpl-action-btn,.format-choice-btn { background:var(--raised); border-color:var(--line); }
.toggle-row { gap:16px; }
.toggle-row > span { font-size:13px; }
.toggle-row > div { flex-wrap:wrap; justify-content:flex-end; }
.toggle { display:block; flex-shrink:0; }
.toggle input { display:block; position:absolute; opacity:0; inset:0; width:100%; height:100%; }
.toggle input:focus-visible + .slider { outline:2px solid var(--ink); outline-offset:3px; }
.save-btn { margin:8px 20px 20px; width:calc(100% - 40px); padding:14px; border-radius:9px; font-size:14px; }
.event-actions { margin:0 20px 20px; flex-wrap:wrap; }
.event-actions button { min-width:120px; font-size:12px; padding:12px; }
.btn-duplicate { background:var(--raised); border-color:var(--line); }
.btn-danger { background:#ef806014; border-color:#D2D8CF; color:#A63D24; }
.live-stats { margin:0 20px 20px; gap:8px; }
.stat-box { border-color:var(--line); border-radius:10px; background:var(--surface); }
.stat-num { font-family:Manrope,system-ui,sans-serif; font-size:28px; font-weight:400; color:var(--ink); }
.stat-label { color:var(--muted); }
.selection-bar { background:var(--raised); border:1px solid var(--line); border-radius:10px; margin:12px 20px; bottom:85px; z-index:9; }
.toast { bottom:100px; z-index:150; background:var(--ink); color:var(--bg); border-radius:10px; box-shadow:0 8px 30px #0005; }
.icon-btn { padding:8px; color:var(--muted); display:inline-flex; }
.icon-btn:hover { color:var(--accent); }
.settings-body { padding:20px; }
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); }
.settings-row:last-child { border:0; }
.settings-label { color:var(--muted); font-size:12px; }
.settings-value { margin-top:4px; overflow-wrap:anywhere; }
.secondary-action { display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:12px 15px; background:var(--raised); color:var(--ink); border:1px solid var(--line); border-radius:8px; font-size:12px; cursor:pointer; }
.settings-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.format-modal { background:var(--surface); border-color:var(--line); max-width:420px; }
.format-modal-cancel,.format-cancel-btn { background:transparent; border:0; padding:10px; color:var(--muted); cursor:pointer; }
#view-ecrans,#view-settings { display:none; }
#view-template-editor { height:auto; min-height:calc(100dvh - 77px - 82px); }
.tpl-toolbar { background:var(--bg); border-color:var(--line); padding:12px 20px; top:77px; gap:6px; }
.tpl-toolbar .back { font-size:12px; max-width:120px; }
.tpl-toolbar-name { font-size:14px; padding:8px 4px; }
.tpl-toolbar button.save { padding:10px; font-size:12px; }
.tpl-editor-layout { display:flex; flex-direction:column; gap:0; }
.tpl-sidebar { width:100%; border:0; overflow:visible; padding-bottom:20px; }
.tpl-sidebar-left { order:2; }
.tpl-sidebar-right { order:3; border-top:1px solid var(--line); }
.tpl-canvas-wrap { order:1; flex:none; min-height:310px; height:44dvh; background:#FFFFFF; background-image:radial-gradient(#ffffff12 1px,transparent 1px); background-size:18px 18px; border-bottom:1px solid var(--line); }
.tpl-add-list { display:grid; grid-template-columns:1fr 1fr; }
.tpl-add-submenu { grid-column:1 / -1; background:var(--bg); }
.tpl-add-row,.layer-row { border-color:var(--line); }
.layer-row,.tpl-geom-field { background:var(--surface); }
.layer-row.selected { background:#e8603c16; }
.tpl-geom-field { border-color:var(--line); }
.tpl-align-btn { background:var(--raised); border-color:var(--line); }
.tpl-toolbar-name:focus { background:var(--surface); }
#bilan { margin:0 4px; }
#loading-gate { color:var(--muted); padding:24px; text-align:center; }
#view-login { background:var(--bg); }
.login-card { background:var(--surface); border:1px solid var(--line); padding:30px; border-radius:16px; max-width:400px; }
.login-title { margin-bottom:4px; }
.login-title .companion-wordmark { width:290px; margin-inline:auto; }
.login-field input { background:var(--bg); border-color:var(--line); }
@media(max-width:420px) { .event-card { grid-template-columns:1fr; } .event-card > .badge { position:absolute; right:16px; top:17px; } .event-date { padding-right:68px; } .card-name { font-size:15px; } .tpl-toolbar .back { font-size:11px; max-width:88px; } }
@media(min-width:720px) { #mode-badge { display:inline-flex; } h1 { font-size:42px; } #events-list,#templates-list,#rolls-list { display:grid; grid-template-columns:1fr 1fr; } #workspace-heading { padding-top:35px; } .event-card { grid-template-columns:1fr; } .event-card > .badge { justify-self:start; } .event-actions { flex-wrap:nowrap; } }
@media(min-width:1080px) {
  body { padding:0 0 36px 224px; }
  #app-header { padding:18px 40px; height:82px; }
  #app-header .brand { display:none; }
  .account-button { border-radius:8px; padding:9px 12px; }
  .account-button .account-label { display:inline; font-size:11px; }
  .tabbar { top:0; bottom:0; width:224px; right:auto; flex-direction:column; padding:32px 16px; border-top:0; border-right:1px solid var(--line); background:var(--surface); gap:7px; }
  .nav-brand { display:block; padding:4px 8px 28px; }
  .nav-caption { display:block; color:#626A63; font-size:9px; text-transform:uppercase; letter-spacing:1.8px; margin:12px 16px 8px; }
  .tab { flex:none; flex-direction:row; justify-content:flex-start; gap:13px; padding:14px 16px; font-size:13px; min-height:50px; }
  .nav-footer { display:block; margin:auto 16px 0; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
  .nav-footer strong { color:var(--ink); font-weight:600; display:block; margin-bottom:4px; }
  #workspace-heading { padding:42px 40px 30px; max-width:1240px; margin:auto; }
  .preview-note { margin:0 40px 8px; }
  #section-nav { margin:0 40px 24px; max-width:520px; }
  body > [id^=view-]:not(#view-login):not(#view-template-editor) { max-width:1240px; margin:0 auto; padding:0 20px; }
  .filter-row { max-width:360px; }
  .create-row { max-width:670px; }
  #events-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .event-card { padding:24px; min-height:170px; }
  .section-card-header { padding:24px; }
  .field,.toggle-row { padding:18px 24px; }
  .section-card { margin-bottom:22px; }
  .selection-bar { bottom:20px; }
  .toast { bottom:28px; }
  #view-template-editor { height:calc(100dvh - 82px); min-height:0; }
  .tpl-toolbar { top:82px; }
  .tpl-editor-layout { flex-direction:row; }
  .tpl-canvas-wrap { order:2; flex:1; height:auto; min-height:0; border:0; }
  .tpl-sidebar-left { order:1; border-right:1px solid var(--line); }
  .tpl-sidebar-right { order:3; border-left:1px solid var(--line); border-top:0; }
  .tpl-sidebar { width:240px; overflow-y:auto; }
  .tpl-add-list { display:flex; }
  #view-login { margin-left:-224px; }
}

/* Usage mobile : les panneaux restent dans le flux, y compris avec un clavier ouvert.
   Les marges corrigent les vrais débordements ; aucun overflow-x:hidden ne masque un outil. */
@media (max-width:1079px) {
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-block:calc(var(--app-header-h, 77px) + 128px) calc(96px + env(safe-area-inset-bottom)); }
  body { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
  #app-header { min-height:calc(77px + env(safe-area-inset-top)); padding-top:calc(16px + env(safe-area-inset-top)); }
  .tabbar { padding-left:calc(8px + env(safe-area-inset-left)); padding-right:calc(8px + env(safe-area-inset-right)); }
  .tab { min-width:0; }
  .tpl-toolbar { top:var(--app-header-h, calc(77px + env(safe-area-inset-top))); }
  #view-template-editor { min-height:calc(100svh - var(--app-header-h, 77px) - 92px - env(safe-area-inset-bottom)); }
  .selection-bar { bottom:calc(85px + env(safe-area-inset-bottom)); flex-wrap:wrap; }
  .toast { bottom:calc(100px + env(safe-area-inset-bottom)); max-width:calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)); text-align:center; }

  button,.secondary-action { min-height:44px; }
  .icon-btn,.layer-btn,.account-button,#back-btn,.counter-row button { min-width:44px; min-height:44px; justify-content:center; align-items:center; }
  .counter-row button { width:44px; height:44px; flex-shrink:0; }
  .counter-row { flex-wrap:wrap; gap:10px; }
  .select-toggle-btn,.tpl-edit-link { padding:10px 4px; }
  .tpl-edit-link { white-space:normal; }
  .toggle { height:44px; }
  .toggle .slider { top:8px; bottom:8px; }
  .toggle input { min-height:44px; z-index:1; cursor:pointer; }
  .tpl-sidebar label:has(> input[type="checkbox"]) { min-height:44px; align-items:center !important; }
  .ev-checkbox { width:28px; height:28px; }
  /* Les cartes et libellés parent constituent la cible des cases ; les inputs restent lisibles. */
  #ecrans-editor label.card { min-height:64px; }
  #ecrans-editor input[type="checkbox"] { width:24px; height:24px; flex-shrink:0; accent-color:var(--accent); }
  .tpl-handle::before { content:''; position:absolute; inset:-16px; }

  /* Les styles inline historiques passent sous cette taille, source du zoom de Safari. */
  input:not([type="checkbox"]):not([type="radio"]),select,textarea { font-size:16px !important; min-height:44px; max-width:100%; scroll-margin-block:calc(var(--app-header-h, 77px) + 128px) calc(96px + env(safe-area-inset-bottom)); }
  input[type="color"] { min-width:44px; min-height:44px; }
  input[type="range"] { padding-block:0; cursor:pointer; }
  .tpl-geom-field { padding-block:0; min-height:46px; }
  .tpl-geom-field input { min-width:0; width:100%; padding-block:8px; }
  .field textarea { resize:vertical; }

  .card > div,.event-card-content > div,.settings-row > div,.toggle-row > span,.field-grid-2 > * { min-width:0; }
  .card-name,.card-sub,.settings-value,#page-title,.section-card-header h3 { overflow-wrap:anywhere; }
  .card-stats { flex-wrap:wrap; }
  .field-grid-2,.tpl-xywh-grid,.tpl-add-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tpl-align-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tpl-add-row { min-width:0; overflow-wrap:anywhere; }
  .tpl-action-row { flex-wrap:wrap; }
  .tpl-action-btn { min-width:100px; }
  .live-stats { flex-wrap:wrap; }
  .stat-box { min-width:96px; }
  .settings-row { flex-wrap:wrap; }
  .settings-actions > button { max-width:100%; white-space:normal; }
  #ecrans-editor .card { flex-wrap:wrap; }
  #ecrans-editor .card > div { flex-basis:140px !important; }
  #ecrans-editor .card select { max-width:100%; }
  #ecrans-editor .card input[type="range"] { flex:1 1 120px; }

  .format-modal-overlay { padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
  .format-modal { max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; }
  .format-modal > * { flex-shrink:0; }
  #calage-modal { padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)) !important; }
  #calage-modal > div { max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; overscroll-behavior:contain; }
  #calage-modal > div > div { flex-wrap:wrap; }
  #calage-modal .calage-values,#calage-modal > div > div:has(.calage-btn) > div:last-child { min-width:120px; }
  #calage-modal .save-btn { margin:0; width:auto; min-width:120px; flex:1; }
}

@media (max-width:600px) {
  .tpl-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:10px 16px; }
  .tpl-toolbar .back { min-width:0; max-width:none; text-align:left; font-size:12px; justify-content:flex-start; }
  .tpl-toolbar-name { grid-column:1 / -1; grid-row:2; padding:10px 12px; border:1px solid var(--line); background:var(--surface); }
  .tpl-toolbar button.save { grid-column:2; grid-row:1; padding:10px 14px; }
  .field-grid-2 { grid-template-columns:minmax(0,1fr); }
  .camera-preset-grid,#presets-editor div[style*="grid-template-columns"] { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  .camera-preset-grid > *,#presets-editor div[style*="grid-template-columns"] > * { min-width:0; }
  #event-fields .toggle-row { flex-wrap:wrap; }
  #event-fields .toggle-row > div { width:100%; justify-content:space-between; }
  #templates-list .card > div:last-child { flex-wrap:wrap; }
  .event-actions button { flex:1 1 150px; }
}

@media (max-width:360px) {
  #app-header { gap:8px; padding-left:16px; padding-right:16px; }
  .create-row { flex-wrap:wrap; }
  .create-row input { flex-basis:100%; }
  .create-row button { width:100%; justify-content:center; }
  .card,.roll-card { padding:16px; }
  .section-card-header,.field,.toggle-row { padding-left:16px; padding-right:16px; }
  .tpl-add-list { grid-template-columns:minmax(0,1fr); }
  .format-modal { padding:18px; }
  .login-card { padding:22px; }
}

@media (max-width:1079px) and (max-height:500px) and (orientation:landscape) {
  .tpl-canvas-wrap { height:60dvh; min-height:220px; }
  .tpl-toolbar { padding-block:8px; }
}

@media (prefers-reduced-motion:reduce) {
  .slider,.slider::after,.toast,#calage-feuille-inner { transition:none !important; }
}
.supervision-card{display:flex;flex-direction:column;align-items:stretch;gap:14px;cursor:default}.supervision-title{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.supervision-summary{padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:12px}.supervision-summary>div{display:flex;align-items:center;gap:14px}.supervision-summary strong{font:32px Manrope,system-ui,sans-serif;color:var(--accent)}.supervision-summary span,.supervision-summary p{font-size:12px;color:var(--muted)}.supervision-summary p{margin-top:10px}.supervision-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.supervision-metrics>div{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:14px 10px;min-width:0}.supervision-metrics strong{display:block;font-size:18px;overflow-wrap:anywhere}.supervision-metrics span{display:block;font-size:11px;color:var(--muted);margin-top:6px}.supervision-alert{display:flex;align-items:flex-start;gap:10px;color:#A43336;background:#e8603c12;border-radius:8px;padding:12px;font-size:13px}.supervision-card .settings-actions{margin-top:0}@media(max-width:420px){.supervision-metrics{grid-template-columns:1fr}.supervision-metrics>div{display:flex;justify-content:space-between;align-items:center;gap:10px}.supervision-metrics span{margin:0}.supervision-metrics strong{font-size:16px}}

/* Studio clair : signature, typographie et contrastes de l’interface. */
.companion-lockup { display:inline-flex; flex-direction:column; align-items:flex-start; gap:3px; line-height:1.1; color:var(--ink); }
.companion-name { font-family:var(--font-sans); font-weight:600; font-size:25px; letter-spacing:-1px; }
.companion-name > span { color:var(--accent); }
.companion-endorsement { display:flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:11px; color:var(--muted); line-height:1; }
.companion-endorsement img { width:71px; height:auto; display:block; }
.login-title .companion-lockup { align-items:center; padding:8px 0 16px; }
.login-title .companion-name { font-size:38px; }
.login-title .companion-endorsement img { width:88px; }
h1,h3,.mobile-reload-dialog h2,.supervision-summary strong { font-family:var(--font-sans); font-weight:600; }
.eyebrow,.nav-caption,.event-date,.stat-label,.settings-label,.tpl-geom-field label,.tpl-loupe-readout,.calage-values { font-family:var(--font-mono); font-weight:500; }
.eyebrow,.mode-pill,.tab.active,.preview-note .c-icon,.supervision-summary strong { color:var(--accent-text); }
button,.secondary-action { min-height:48px; }
.create-row button,.save-btn,.login-btn,.create-btn,.tpl-toolbar button.save { color:var(--on-accent); border-radius:8px; }
.card,.roll-card,.section-card,.login-card,.format-modal { border-radius:16px; }
.card:hover { background:var(--raised); border-color:var(--line); }
.tpl-canvas-wrap { background:var(--raised); background-image:radial-gradient(var(--line) 1px,transparent 1px); }
.badge-active { color:#2A693E; background:#2A693E12; }
.badge-upcoming { color:#805413; background:#80541312; }
.badge-completed { color:var(--muted); background:var(--raised); }
.supervision-alert { color:#805413; background:#8054130c; }
@media(max-width:359px) { .companion-name { font-size:22px; } .companion-endorsement img { width:60px; } }