/* Graphican for Business — organization workspace (/org/), on top of account.css */
.ac.og { display:flex; flex-direction:column; align-items:stretch; max-width:860px; }
.og-biz { font:600 12px/1 Inter, sans-serif; color:var(--acc2); letter-spacing:.04em; margin-left:4px; }
.og .ac-kicker { margin:0 0 8px; font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--acc2); }
.og .ac-kicker a { text-decoration:none; }
.og-intro h1 { margin:0; font:700 26px/1.2 'Inter Tight', Inter, sans-serif; letter-spacing:-.01em; }
.og h3 { margin:22px 0 10px; font-size:13.5px; font-weight:650; color:var(--text); }
.og h3:first-of-type { margin-top:4px; }
.og input, .og select, .og textarea { min-height:40px; padding:8px 10px; border-radius:9px; border:1px solid var(--line2); background:var(--c2); color:var(--text); font:inherit; font-size:14px; min-width:0; }
.og textarea { width:100%; resize:vertical; }
.og input[type=color] { padding:2px; width:44px; }
.og input:focus, .og select:focus, .og textarea:focus { outline:none; border-color:var(--acc2); }
.og-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.og-row input[name=name], .og-row input[name=email], #og-fam { flex:1 1 200px; }
.og-list { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px; }
.og-list a { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:11px; border:1px solid var(--line); background:var(--c2); text-decoration:none; }
.og-list a:hover { border-color:rgba(164,151,255,.5); }
.og-list span { color:var(--mut); font-size:13px; }
.og-colors { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; align-items:start; }
.og-col { display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px solid var(--line); border-radius:11px; background:var(--c2); }
.og-col i { flex:none; width:44px; height:44px; border-radius:9px; background:var(--c); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.og-col div { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:0; }
.og-col div input:not([type]) { width:100%; }
.og-col code { color:var(--mut); font-size:12.5px; }
.og-logos { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
.og-logos figure { margin:0; width:150px; display:flex; flex-direction:column; gap:6px; }
.og-logos img { width:150px; height:100px; object-fit:contain; padding:10px; border-radius:11px; background:repeating-conic-gradient(#2a2a30 0 25%, #222228 0 50%) 0 0/16px 16px; border:1px solid var(--line); }
.og-logos figcaption { display:flex; gap:4px; align-items:center; font-size:13px; color:var(--mut); }
.og-logos figcaption input { width:100%; min-height:32px; font-size:12.5px; }
.og-up { cursor:pointer; }
.og-fonts { display:grid; gap:8px; }
.og-font { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--c2); }
.og-font span { font-size:20px; flex:1 1 220px; }
.og-font small { color:var(--mut); }
.og-type { display:grid; gap:8px; }
.og-trow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.og-trow b { width:110px; font-size:13.5px; }
.og-trow input[type=number] { width:80px; }
.og-sample { color:var(--mut); font-size:15px; }
.og-rules { display:grid; gap:10px; }
.og-rules label { display:grid; gap:6px; font-size:13px; color:var(--mut); }
.og-rules label.chk { display:flex; align-items:center; gap:8px; }
.og-rules label.chk input { min-height:0; width:18px; height:18px; }
.og .hint { margin:8px 0 0; color:var(--dim); font-size:12.5px; }
.og-tpls { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
.og-tpl a { display:flex; flex-direction:column; gap:4px; text-decoration:none; }
.og-tpl img, .og-noth { width:100%; aspect-ratio:4/5; object-fit:contain; border-radius:11px; background:var(--c2); border:1px solid var(--line); }
.og-noth { display:grid; place-items:center; color:var(--mut); font-size:13px; }
.og-tpl small { color:var(--mut); font-size:12px; }
.og-mem { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.og-mem li { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--c2); }
.og-mem li div { flex:1 1 200px; display:flex; flex-direction:column; min-width:0; }
.og-mem small { color:var(--mut); font-size:12.5px; overflow-wrap:anywhere; }
#og-toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px); z-index:50; max-width:calc(100vw - 32px); padding:12px 16px; border-radius:12px; background:#1d1b22; border:1px solid rgba(164,151,255,.35); color:#fff; font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
#og-toast.on { opacity:1; transform:translate(-50%, 0); }

/* ---------- the panel: sidebar + main ---------- */
/* account.css lays its body out as a sidebar grid for /account/: the panel brings its own */
body:has(.ac.og.og-wide) { display:block; }
body:has(.ac.og.og-wide) .ac.og.og-wide { max-width:1320px; width:auto; margin:0 auto; display:grid; grid-template-columns:236px minmax(0,1fr); gap:24px; align-items:start; padding:24px clamp(16px, 3vw, 40px) 64px; }
.og-side { position:sticky; top:82px; display:flex; flex-direction:column; gap:12px; padding:12px; border:1px solid var(--line); border-radius:16px; background:var(--c1); }
.og-org { display:flex; gap:10px; align-items:center; padding:4px 4px 12px; border-bottom:1px solid var(--line); }
.og-org div { min-width:0; display:flex; flex-direction:column; }
.og-org b { font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.og-org small { color:var(--mut); font-size:12.5px; }
.og-av { flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font:700 17px/1 'Inter Tight', Inter, sans-serif; font-style:normal; color:#fff; background:linear-gradient(135deg, var(--acc), var(--acc2)); }
.og-av.sm { width:24px; height:24px; border-radius:7px; font-size:12px; }
.og-nav { display:flex; flex-direction:column; gap:2px; }
.og-nav a, .og-back { display:flex; align-items:center; gap:10px; min-height:40px; padding:0 10px; border-radius:10px; color:var(--mut); text-decoration:none; font-size:14px; font-weight:550; }
.og-nav a span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.og-nav a:hover, .og-back:hover { background:var(--c2); color:var(--text); }
.og-nav a[aria-current] { background:rgba(123,100,255,.16); color:var(--text); box-shadow:inset 2px 0 0 var(--acc2); }
.og-nav a:focus-visible, .og-back:focus-visible { outline:2px solid var(--acc2); outline-offset:-2px; }
.og-side svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.og-back { border-top:1px solid var(--line); border-radius:0 0 10px 10px; padding-top:4px; font-size:13px; }
.og-sideh { margin:4px 10px -6px; color:var(--dim); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.og-main { display:flex; flex-direction:column; gap:16px; min-width:0; }
.og-top { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; justify-content:space-between; padding:2px 2px 0; }
.og-top h1 { margin:0; font:700 28px/1.15 'Inter Tight', Inter, sans-serif; letter-spacing:-.01em; }
.og-crumb { margin:0 0 4px; color:var(--mut); font-size:13px; }
.og-acts { display:flex; flex-wrap:wrap; gap:8px; }
.og-acts .btn { min-height:40px; }
.og-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; }
.og-stat { display:flex; flex-direction:column; gap:8px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--c1); min-height:120px; }
.og-stat small { color:var(--mut); font-size:12.5px; font-weight:600; }
.og-stat b { font:700 30px/1.05 'Inter Tight', Inter, sans-serif; letter-spacing:-.01em; }
.og-stat b em { font-style:normal; font-size:15px; color:var(--mut); font-weight:600; }
.og-stat span { color:var(--dim); font-size:12.5px; margin-top:auto; }
.og-bar { display:block; height:6px; border-radius:6px; background:var(--c2); overflow:hidden; min-width:60px; }
.og-bar i { display:block; height:100%; border-radius:inherit; background:var(--acc2); }
.og-bar.hi i { background:var(--warn); }
.og-tbl .og-bar { margin-top:6px; max-width:120px; }
.og-chbar { width:140px; }
.og-grid2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:16px; align-items:start; }
.og-ch { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.og-ch h2 { margin:0; }
.og-ch a { color:var(--acc2); font-size:13px; text-decoration:none; font-weight:600; }
.og-mut { color:var(--mut); font-size:13px; }
.og-swatch { display:flex; flex-wrap:wrap; gap:8px; }
.og-swatch i { width:42px; height:42px; border-radius:10px; background:var(--c); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.og-mlogos { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.og-mlogos img { height:48px; max-width:120px; object-fit:contain; padding:6px; border-radius:9px; background:var(--c2); }
.og-tsam { margin-top:14px; display:grid; gap:6px; }
.og-tsam p { margin:0; font-size:18px; }
.og-tsam small { font:500 12px Inter, sans-serif; color:var(--mut); margin-left:6px; }
.og-voice { margin:14px 0 0; color:var(--mut); font-size:13.5px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.og-steps { list-style:none; margin:0; padding:0; display:grid; gap:6px; counter-reset:st; }
.og-steps li { counter-increment:st; }
.og-steps a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px; border:1px solid var(--line); background:var(--c2); text-decoration:none; font-size:14px; }
.og-steps a::before { content:counter(st); flex:none; width:24px; height:24px; line-height:1; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; border:1.5px solid var(--line2); color:var(--mut); }
.og-steps li.is-done a { color:var(--mut); }
.og-steps li.is-done a::before { content:''; background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; border-color:var(--ok); }
.og-tpls.sm { grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
.og-tools { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; margin-bottom:16px; }
.og-chips { display:flex; flex-wrap:wrap; gap:6px; }
.og-chips button { min-height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--line2); background:transparent; color:var(--mut); font-size:13.5px; font-weight:600; cursor:pointer; }
.og-chips button small { opacity:.7; margin-left:2px; }
.og-chips button[aria-pressed="true"] { background:var(--text); border-color:var(--text); color:var(--bg); }
#og-tq, #og-oq { flex:0 1 260px; }
.og-fl { display:flex; align-items:center; gap:8px; color:var(--mut); font-size:13px; }
.og-tw { overflow-x:auto; margin:0 -4px; padding:0 4px; }
.og-tbl { width:100%; border-collapse:collapse; font-size:14px; }
.og-tbl th { text-align:left; font-size:12px; color:var(--mut); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.og-tbl td { padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.og-tbl tbody tr:last-child td { border-bottom:0; }
.og-tbl td a { text-decoration:none; }
.og-tbl td small { display:block; color:var(--mut); font-size:12.5px; overflow-wrap:anywhere; }
.og-tbl tr[data-open] { cursor:pointer; }
.og-tbl tbody tr:hover { background:rgba(255,255,255,.025); }
.og-tbl select { min-height:34px; padding:4px 8px; }
.og-tbl td:last-child { text-align:right; white-space:nowrap; }
.og-pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; background:rgba(134,239,172,.12); color:var(--ok); }
.og-pill.warn { background:rgba(250,204,21,.12); color:var(--warn); }
.og-pill.off { background:rgba(252,165,165,.12); color:var(--bad); }
.og-dl { display:grid; grid-template-columns:max-content 1fr; gap:10px 18px; margin:0; font-size:14px; }
.og-dl dt { color:var(--mut); }
.og-dl dd { margin:0; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (max-width:900px) {
  body:has(.ac.og.og-wide) .ac.og.og-wide { grid-template-columns:minmax(0,1fr); gap:14px; padding:12px 16px 48px; }
  .og-side { position:static; padding:10px; gap:8px; }
  .og-org { padding:2px 2px 10px; }
  .og-nav { flex-direction:row; overflow-x:auto; scrollbar-width:none; margin:0 -10px; padding:0 10px; }
  .og-nav::-webkit-scrollbar { display:none; }
  .og-nav a { flex:none; }
  .og-nav a[aria-current] { box-shadow:inset 0 -2px 0 var(--acc2); }
  .og-sideh, .og-mine { display:none; }
  .og-back { border-top:0; min-height:32px; padding:0 4px; }
  .og-grid2 { grid-template-columns:minmax(0,1fr); }
  .og-stats { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .og-top h1 { font-size:24px; }
}
@media (max-width:600px) {
  .og-stat { min-height:0; padding:14px; }
  .og-stat b { font-size:24px; }
  .og-acts { width:100%; }
  .og-acts .btn { flex:1 1 auto; padding:0 12px; }
  #og-tq, #og-oq { flex:1 1 100%; }
  .og-tbl thead { display:none; }
  .og-tbl tr { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:12px 0; border-bottom:1px solid var(--line); }
  .og-tbl tbody tr:last-child { border-bottom:0; }
  .og-tbl td { border:0; padding:0; }
  .og-tbl td:first-child { flex:1 1 100%; }
  .og-tbl td:last-child { margin-left:auto; }
}
/* the package of Graphican for Business */
.og-mods { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px; }
.og-mods li { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--c2); }
.og-mods li b { font-size:14px; }
.og-mods li small { color:var(--mut); font-size:12.5px; }
.og-mods li.on { border-color:rgba(164,151,255,.45); background:rgba(123,100,255,.1); }
.og-mods li.off { opacity:.5; }
.og-plan { display:grid; gap:14px; }
.og-plan fieldset { margin:0; padding:0; border:0; }
.og-plan legend { margin-bottom:8px; font-size:13px; color:var(--mut); }
.og-mchk { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
.og-mchk label { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:11px; border:1px solid var(--line); background:var(--c2); cursor:pointer; }
.og-mchk input { min-height:0; width:18px; height:18px; margin-top:2px; accent-color:var(--acc); }
.og-mchk span { display:flex; flex-direction:column; }
.og-mchk small { color:var(--mut); font-size:12.5px; }
.og-plan .hint a { color:var(--acc2); }
/* a narrow phone: the header keeps the logo and the account link */
@media (max-width:520px) { .ac-h nav a[href="/business/"], .ac-h nav a[href="/video/"] { display:none; } }
@media (max-width:360px) { .og-biz { display:none; } }
@media (max-width:420px) { .ac-h nav a:last-child { display:revert; } .ac-h nav a[href="/editor/"] { display:none; } }
/* an editor inside the workspace: the sidebar folds to icons, the editor takes the rest of the screen */
body:has(.ac.og.og-wide.og-editing) .ac.og.og-wide.og-editing { max-width:none; grid-template-columns:64px minmax(0, 1fr); gap:14px; padding:12px 14px 12px; }
.og-editing .og-side { padding:10px 8px; gap:8px; }
.og-editing .og-org { justify-content:center; padding:2px 0 10px; }
.og-editing .og-org > div, .og-editing .og-nav a span, .og-editing .og-back span, .og-editing .og-sideh { display:none; }
.og-editing .og-nav a, .og-editing .og-back { justify-content:center; padding:0; }
.og-editing .og-main { gap:8px; }
.og-editing .og-top { align-items:center; }
.og-editing .og-top h1 { font-size:18px; }
.og-editing .og-crumb { display:none; }
.og-editing .og-acts .btn { min-height:34px; }
.og-ed { display:block; width:100%; height:calc(100vh - 58px - 24px - 50px); height:calc(100dvh - 58px - 24px - 50px); min-height:520px; border:1px solid var(--line); border-radius:14px; background:#0b0b0f; }
@media (max-width:900px) {
  body:has(.ac.og.og-wide.og-editing) .ac.og.og-wide.og-editing { grid-template-columns:minmax(0, 1fr); gap:8px; padding:8px; }
  .og-editing .og-side { padding:6px; }
  .og-editing .og-org { display:none; }
  .og-editing .og-nav a { padding:0 12px; }
  .og-editing .og-nav a span { display:inline; }
  .og-editing .og-sideh { display:none; }
  .og-editing .og-top { display:none; }
  .og-ed { height:calc(100dvh - 58px - 16px - 60px); min-height:440px; border-radius:10px; }
}
html.embed .og-ed { height:calc(100vh - 80px); }