*{box-sizing:border-box;margin:0;padding:0}

/* ════ THEMES ════ */
[data-theme="amber"]{
  --t-bg-primary:#FFFFFF;--t-bg-secondary:#F7F7F7;--t-bg-body:#FAFAFA;
  --t-text-primary:#1a1a1a;--t-text-secondary:#6b6b6b;
  --t-border:#e0e0e0;--t-border-secondary:#ccc;
  --t-accent:#BA7517;--t-accent-text:#854F0B;--t-accent-hover:#EF9F27;
  --t-accent-bg:#FAEEDA;--t-accent-bg-text:#633806;
  --t-cmd-name:#0F6E56;--t-gem:#BA7517;
  --t-btn-bg:#FAEEDA;--t-btn-text:#633806;--t-btn-border:#EF9F27;--t-btn-hover:#FAC775;
  color-scheme:light;
}
@media(prefers-color-scheme:dark){
  [data-theme="amber"]{
    --t-bg-primary:#1e1e1e;--t-bg-secondary:#2a2a2a;--t-bg-body:#171717;
    --t-text-primary:#e0e0e0;--t-text-secondary:#999;
    --t-border:#333;--t-border-secondary:#444;
    --t-accent:#BA7517;--t-accent-text:#FAC775;--t-accent-hover:#EF9F27;
    --t-accent-bg:#412402;--t-accent-bg-text:#FAC775;
    --t-cmd-name:#5DCAA5;--t-gem:#BA7517;
    --t-btn-bg:#412402;--t-btn-text:#FAC775;--t-btn-border:#633806;--t-btn-hover:#633806;
    color-scheme:dark;
  }
}
[data-theme="noir"]{
  --t-bg-primary:#1c1c1e;--t-bg-secondary:#28282b;--t-bg-body:#121214;
  --t-text-primary:#e8e6e1;--t-text-secondary:#8a8880;
  --t-border:#3a3a3c;--t-border-secondary:#4a4a4c;
  --t-accent:#C5A55A;--t-accent-text:#D4B96A;--t-accent-hover:#D4AF37;
  --t-accent-bg:#2e2a1f;--t-accent-bg-text:#D4B96A;
  --t-cmd-name:#C5A55A;--t-gem:#D4AF37;
  --t-btn-bg:#2e2a1f;--t-btn-text:#D4B96A;--t-btn-border:#7a6c3a;--t-btn-hover:#3d3625;
  color-scheme:dark;
}
[data-theme="crystal"]{
  --t-bg-primary:#0e1a33;--t-bg-secondary:#142244;--t-bg-body:#0a1228;
  --t-text-primary:#dce4f0;--t-text-secondary:#7b8fad;
  --t-border:#1e3460;--t-border-secondary:#2a4578;
  --t-accent:#5b9bd5;--t-accent-text:#8ac0ff;--t-accent-hover:#7bb5f0;
  --t-accent-bg:#162850;--t-accent-bg-text:#a8d0ff;
  --t-cmd-name:#5bc0de;--t-gem:#5b9bd5;
  --t-btn-bg:#162850;--t-btn-text:#a8d0ff;--t-btn-border:#2e5090;--t-btn-hover:#1e3868;
  color-scheme:dark;
}
[data-theme="glass"]{
  --t-bg-primary:rgba(0,0,0,0.26);
  --t-bg-secondary:rgba(0,0,0,0.38);
  --t-bg-body:#05050e;
  --t-text-primary:#e2e8f8;--t-text-secondary:#6b7a9e;
  --t-border:rgba(255,255,255,0.13);--t-border-secondary:rgba(255,255,255,0.24);
  --t-accent:#818cf8;--t-accent-text:#a5b4fc;--t-accent-hover:#6366f1;
  --t-accent-bg:rgba(99,102,241,0.15);--t-accent-bg-text:#c7d2fe;
  --t-cmd-name:#67e8f9;--t-gem:#818cf8;
  --t-btn-bg:rgba(99,102,241,0.18);--t-btn-text:#c7d2fe;--t-btn-border:rgba(165,180,252,0.3);--t-btn-hover:rgba(99,102,241,0.32);
  --glass-blur:backdrop-filter:blur(9px) saturate(180%);
  color-scheme:dark;
}


/* ════ GLASS THEME BODY + PANEL OVERRIDES ════ */
/* Image on html covers full viewport; linear-gradient overlay dims it for readability */
html[data-theme="glass"]{
  background:
    linear-gradient(rgba(5,5,14,0.48), rgba(5,5,14,0.48)),
    url('./bg-glass.png') center top / cover no-repeat fixed;
  background-color:#05050e;
}

/* Apply glassmorphism to all panel/card surfaces in glass theme */
[data-theme="glass"] #site-header,
[data-theme="glass"] #tool-nav{
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  border-color:rgba(255,255,255,0.1);
}
[data-theme="glass"] .sm-panel,
[data-theme="glass"] .pf-panel,
[data-theme="glass"] .cmd-browser,
[data-theme="glass"] .output-panel,
[data-theme="glass"] .lines-panel,
[data-theme="glass"] .name-row,
[data-theme="glass"] .ph-wrap,
[data-theme="glass"] .tool-card{
  background:rgba(0,0,0,0.26);
  backdrop-filter:blur(9px) saturate(180%);
  -webkit-backdrop-filter:blur(9px) saturate(180%);
  border:1.5px solid rgba(255,255,255,0.13);
  box-shadow:0 8px 24px 0 rgba(20,10,60,0.45);
}
[data-theme="glass"] .tool-card:hover{
  background:rgba(99,102,241,0.12);
  border-color:rgba(165,180,252,0.35);
  box-shadow:0 12px 32px 0 rgba(99,102,241,0.25);
}
[data-theme="glass"] .sm-panel-head,
[data-theme="glass"] .pf-panel-head,
[data-theme="glass"] .cb-head,
[data-theme="glass"] .out-head,
[data-theme="glass"] .lines-foot,
[data-theme="glass"] .sm-foot,
[data-theme="glass"] .pf-foot{
  border-color:rgba(255,255,255,0.08);
}
[data-theme="glass"] .sm-toolbar,
[data-theme="glass"] .pf-toolbar{
  background:rgba(0,0,0,0.2);
  border-color:rgba(255,255,255,0.08);
}
[data-theme="glass"] .sm-textarea,
[data-theme="glass"] .raw-out,
[data-theme="glass"] .line-inp,
[data-theme="glass"] #macro-name,
[data-theme="glass"] #cmd-search,
[data-theme="glass"] .pf-line-inp,
[data-theme="glass"] .sm-lim-inp{
  background:rgba(0,0,0,0.35);
  border-color:rgba(255,255,255,0.1);
}
[data-theme="glass"] .pf-inputs{
  background:rgba(0,0,0,0.18);
}
[data-theme="glass"] .pf-preview-box,
[data-theme="glass"] #macro-out{
  background:rgba(0,0,0,0.3);
}
[data-theme="glass"] .help-panel{
  background:rgba(99,102,241,0.1);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-color:rgba(165,180,252,0.15);
}
[data-theme="glass"] .sm-picker-container,
[data-theme="glass"] .pf-picker-container{
  background:rgba(5,5,20,0.7);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
[data-theme="glass"] .cat-tabs,
[data-theme="glass"] .sm-channels,
[data-theme="glass"] .pf-templates,
[data-theme="glass"] .pf-tags,
[data-theme="glass"] .pf-tag-cats{
  border-color:rgba(255,255,255,0.08);
}
[data-theme="glass"] .landing-section-label,
[data-theme="glass"] .landing-footer{
  border-color:rgba(255,255,255,0.08);
}
[data-theme="glass"] .soon-card{
  border-color:rgba(255,255,255,0.1);
  background:rgba(0,0,0,0.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* ════ BASE ════ */
html{background:var(--t-bg-body);color:var(--t-text-primary);font-family:system-ui,sans-serif;transition:background .3s,color .3s;min-height:100vh}

/* ════ HEADER ════ */
#tk-header{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:0.5px solid var(--t-border);background:var(--t-bg-primary);position:sticky;top:0;z-index:50}
.tk-gem{width:10px;height:10px;border-radius:2px;background:var(--t-gem);transform:rotate(45deg);flex-shrink:0}
.tk-title{font-family:Georgia,serif;font-size:17px;font-weight:500;letter-spacing:.3px;color:var(--t-text-primary);text-decoration:none}
.tk-title:hover{color:var(--t-accent-text)}
.tk-sub{font-size:12px;color:var(--t-text-secondary);border-left:0.5px solid var(--t-border);padding-left:12px;margin-left:4px}
.tk-header-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.theme-label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--t-text-secondary);font-weight:500}
.theme-btn{width:22px;height:22px;border-radius:50%;border:2px solid var(--t-border);cursor:pointer;transition:border-color .2s,transform .15s;padding:0;flex-shrink:0}
.theme-btn:hover{transform:scale(1.15)}
.theme-btn.active{border-color:var(--t-accent);box-shadow:0 0 0 2px var(--t-accent)}
.theme-btn[data-pick="amber"]{background:linear-gradient(135deg,#FAEEDA 50%,#BA7517 50%)}
.theme-btn[data-pick="noir"]{background:linear-gradient(135deg,#28282b 50%,#D4AF37 50%)}
.theme-btn[data-pick="crystal"]{background:linear-gradient(135deg,#0e1a33 50%,#5b9bd5 50%)}
.theme-btn[data-pick="glass"]{background:linear-gradient(135deg,#0d1117 50%,#58a6ff 50%)}

/* ════ TOOL NAV ════ */
#tk-nav{border-bottom:0.5px solid var(--t-border);background:var(--t-bg-primary);display:flex;align-items:stretch}
.tool-tab{padding:9px 15px;font-size:13px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;color:var(--t-text-secondary);font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;transition:color .15s}
.tool-tab:hover{color:var(--t-text-primary)}
.tool-tab.active{color:var(--t-accent-text);border-bottom-color:var(--t-accent);font-weight:500}
.tool-tab[aria-disabled="true"]{opacity:.35;cursor:default;pointer-events:none}
.nav-spacer{flex:1}
.help-nav-btn{padding:9px 14px;font-size:12px;border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;color:var(--t-text-secondary);font-family:inherit;white-space:nowrap;transition:color .15s}
.help-nav-btn:hover,.help-nav-btn.active{color:var(--t-accent-text)}
.help-nav-btn.active{border-bottom-color:var(--t-accent)}

/* ════ HAMBURGER + MOBILE DRAWER ════ */
.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:40px;height:40px;border:none;background:none;cursor:pointer;padding:8px;margin-left:auto;flex-shrink:0}
.hamburger span{display:block;width:18px;height:1.5px;background:var(--t-text-secondary);border-radius:2px;transition:all .22s}
.hamburger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mobile-drawer{display:none;flex-direction:column;background:var(--t-bg-primary);border-bottom:0.5px solid var(--t-border)}
.mobile-drawer.open{display:flex}
.mobile-drawer a,.mobile-drawer button.mob-help{padding:13px 20px;font-size:14px;border:none;background:none;cursor:pointer;color:var(--t-text-secondary);font-family:inherit;text-decoration:none;text-align:left;border-bottom:0.5px solid var(--t-border);transition:background .1s;display:block;width:100%}
.mobile-drawer a:hover,.mobile-drawer button.mob-help:hover{background:var(--t-bg-secondary);color:var(--t-text-primary)}
.mobile-drawer a.active{color:var(--t-accent-text);background:var(--t-accent-bg)}
@media(max-width:640px){
  #tk-nav .tool-tab,#tk-nav .help-nav-btn,#tk-nav .nav-spacer{display:none}
  .hamburger{display:flex}
}

/* ════ HELP BAR ════ */
#tk-help-bar{overflow:hidden;max-height:0;opacity:0;transition:max-height .25s ease,opacity .2s ease}
#tk-help-bar.open{max-height:600px;opacity:1}
.help-panel{border-bottom:0.5px solid var(--t-border);background:var(--t-accent-bg);padding:14px 16px 12px}
.help-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.help-panel-title{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.9px;color:var(--t-accent-bg-text)}
.help-close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--t-accent-bg-text);padding:0;line-height:1;opacity:.7}
.help-close:hover{opacity:1}
.help-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 24px}
.help-section-title{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.8px;color:var(--t-accent-text);margin-bottom:5px}
.help-item{display:flex;gap:7px;font-size:12px;color:var(--t-accent-bg-text);line-height:1.5;margin-bottom:3px}
.help-item-dot{flex-shrink:0;opacity:.6}
.help-tip{margin-top:8px;padding:7px 10px;background:var(--t-bg-primary);border-radius:8px;font-size:11px;color:var(--t-text-secondary);border-left:2px solid var(--t-accent);line-height:1.5}

/* ════ PAGE ════ */
#main{padding:14px 16px}

/* ════ SHARED COMPONENTS ════ */
.btn-primary{padding:5px 16px;font-size:13px;font-weight:500;border-radius:8px;border:0.5px solid var(--t-btn-border);background:var(--t-btn-bg);color:var(--t-btn-text);cursor:pointer;font-family:inherit;transition:background .15s;white-space:nowrap}
.btn-primary:hover{background:var(--t-btn-hover)}
.btn-secondary{padding:4px 11px;font-size:12px;border-radius:8px;border:0.5px solid var(--t-border-secondary);background:none;cursor:pointer;color:var(--t-text-secondary);font-family:inherit}
.btn-secondary:hover{background:var(--t-bg-secondary)}
.btn-secondary:disabled{opacity:.4;cursor:default}
.btn-copy{padding:4px 13px;font-size:12px;font-weight:500;border-radius:8px;border:0.5px solid var(--t-btn-border);background:var(--t-btn-bg);color:var(--t-btn-text);cursor:pointer;font-family:inherit;transition:background .15s}
.btn-copy:hover{background:var(--t-btn-hover)}
.btn-copy.ok{background:#1a4a2a;color:#6ee7a0;border-color:#2d7a47}
.btn-copy:disabled{opacity:.4;cursor:default}
.raw-out-wrap{border-top:0.5px solid var(--t-border)}
.raw-out-label{padding:6px 13px 3px;font-size:10px;font-weight:500;color:var(--t-text-secondary);text-transform:uppercase;letter-spacing:.9px}
.raw-out{width:100%;padding:8px 13px;font-family:monospace;font-size:12px;border:none;resize:none;background:var(--t-bg-secondary);color:var(--t-cmd-name);line-height:1.75;outline:none;display:block;overflow:hidden}

/* ════ SHARED TOOLBAR ════ */
.tk-toolbar{display:flex;align-items:center;gap:6px;padding:7px 13px;border-bottom:0.5px solid var(--t-border);background:var(--t-bg-secondary)}
.tk-tool-btn{display:flex;align-items:center;gap:5px;padding:3px 10px;font-size:12px;border-radius:8px;border:0.5px solid var(--t-border-secondary);background:var(--t-bg-primary);cursor:pointer;color:var(--t-text-secondary);font-family:inherit;transition:all .1s;user-select:none;white-space:nowrap}
.tk-tool-btn:hover,.tk-tool-btn.active{background:var(--t-accent-bg);color:var(--t-accent-bg-text);border-color:var(--t-accent-hover)}
.tk-picker{border-bottom:0.5px solid var(--t-border);background:var(--t-bg-primary);max-height:280px;overflow-y:auto}
.tk-picker:empty{display:none}
.font-picker{padding:10px 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.font-item{padding:7px 10px;border-radius:8px;border:0.5px solid var(--t-border);background:var(--t-bg-secondary);cursor:pointer;text-align:left;font-family:inherit;transition:border-color .1s,background .1s;display:flex;flex-direction:column;gap:2px}
.font-item:hover{border-color:var(--t-accent-hover);background:var(--t-accent-bg)}
.font-preview{font-size:14px;line-height:1.3;color:var(--t-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.font-name{font-size:10px;color:var(--t-text-secondary);text-transform:uppercase;letter-spacing:.7px;font-weight:500}
.emoji-picker{padding:4px}
.emoji-cat-label{font-size:10px;font-weight:500;color:var(--t-text-secondary);text-transform:uppercase;letter-spacing:.8px;padding:8px 12px 4px;display:block}
.emoji-grid{display:flex;flex-wrap:wrap;gap:2px;padding:0 10px 8px}
.emoji-btn{width:30px;height:30px;font-size:18px;border:none;background:none;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .1s;line-height:1}
.emoji-btn:hover{background:var(--t-bg-secondary)}

/* ════ LANDING ════ */
.landing-hero{padding:64px 24px 52px;text-align:center}
.hero-gem{width:36px;height:36px;border-radius:5px;background:var(--t-gem);transform:rotate(45deg);margin:0 auto 32px;display:block}
.hero-title{font-family:Georgia,serif;font-size:38px;font-weight:500;letter-spacing:.4px;margin-bottom:14px;line-height:1.2}
.hero-sub{font-size:15px;color:var(--t-text-secondary);line-height:1.7;max-width:460px;margin:0 auto 32px}
.hero-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;font-size:14px;font-weight:500;border-radius:8px;border:0.5px solid var(--t-btn-border);background:var(--t-btn-bg);color:var(--t-btn-text);text-decoration:none;transition:background .15s;font-family:inherit}
.hero-btn:hover{background:var(--t-btn-hover)}
.tools-section{padding:0 16px 56px;max-width:960px;margin:0 auto}
.section-eyebrow{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.9px;color:var(--t-text-secondary);margin-bottom:14px;padding-left:2px}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tool-card{border:0.5px solid var(--t-border);border-radius:12px;background:var(--t-bg-primary);padding:20px;text-decoration:none;color:inherit;transition:border-color .2s,transform .15s;display:flex;flex-direction:column;gap:10px}
.tool-card:hover{border-color:var(--t-accent);transform:translateY(-2px)}
.tool-card-icon{font-size:26px;line-height:1}
.tool-card-name{font-size:15px;font-weight:500;color:var(--t-text-primary)}
.tool-card-desc{font-size:13px;color:var(--t-text-secondary);line-height:1.65;flex:1}
.tool-card-cta{font-size:12px;color:var(--t-accent-text);font-weight:500}
.landing-divider{height:0.5px;background:var(--t-border);margin:0 16px}
.landing-footer{text-align:center;padding:28px 16px 40px;font-size:12px;color:var(--t-text-secondary);line-height:1.8}
@media(max-width:600px){.hero-title{font-size:28px}.landing-hero{padding:44px 16px 36px}}

/* ════ MACRO BUILDER ════ */
.macro-layout{display:flex;gap:12px;align-items:flex-start}
.cmd-browser{width:256px;flex-shrink:0;border:0.5px solid var(--t-border);border-radius:12px;overflow:hidden;background:var(--t-bg-primary)}
.cb-head{padding:10px 12px;border-bottom:0.5px solid var(--t-border)}
.cb-label{font-size:10px;font-weight:500;color:var(--t-text-secondary);text-transform:uppercase;letter-spacing:.9px;margin-bottom:7px}
#cmd-search{width:100%;padding:6px 10px;font-size:13px;border:0.5px solid var(--t-border-secondary);border-radius:8px;background:var(--t-bg-secondary);color:var(--t-text-primary);outline:none;font-family:inherit}
.cat-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:7px 10px;border-bottom:0.5px solid var(--t-border)}
.cat-tab{padding:2px 8px;font-size:11px;border-radius:20px;border:0.5px solid var(--t-border);background:none;cursor:pointer;color:var(--t-text-secondary);font-family:inherit;transition:all .1s}
.cat-tab.active{background:var(--t-accent-bg);color:var(--t-accent-bg-text);border-color:var(--t-accent-hover)}
#cmd-list{max-height:420px;overflow-y:auto;padding:6px}
.cmd-item{padding:7px 9px;border-radius:8px;cursor:pointer;margin-bottom:2px;border:none;background:none;width:100%;text-align:left;font-family:inherit;color:var(--t-text-primary)}
.cmd-item:hover{background:var(--t-bg-secondary)}
.cmd-item-top{display:flex;align-items:baseline;gap:6px}
.cmd-name{font-family:monospace;font-size:13px;font-weight:500;color:var(--t-cmd-name)}
.cmd-alias,.cmd-desc{font-size:11px;color:var(--t-text-secondary)}
.cmd-desc{margin-top:2px;line-height:1.35;text-align:left}
.cb-tip{padding:7px 12px;font-size:11px;color:var(--t-text-secondary);border-top:0.5px solid var(--t-border);line-height:1.4}
.macro-editor{flex:1;display:flex;flex-direction:column;gap:10px}
.name-row{display:flex;align-items:center;gap:10px;padding:9px 13px;border:0.5px solid var(--t-border);border-radius:12px;background:var(--t-bg-primary)}
.name-label{font-size:10px;font-weight:500;color:var(--t-text-secondary);text-transform:uppercase;letter-spacing:.9px;flex-shrink:0}
#macro-name{flex:1;padding:5px 9px;font-size:13px;border:0.5px solid var(--t-border-secondary);border-radius:8px;background:var(--t-bg-secondary);color:var(--t-text-primary);outline:none;font-family:inherit}
.line-count{font-size:12px;color:var(--t-text-secondary);flex-shrink:0;min-width:55px;text-align:right}
.line-count.limit{color:#c03}
.lines-panel,.output-panel{border:0.5px solid var(--t-border);border-radius:12px;overflow:hidden;background:var(--t-bg-primary)}
#lines-inner{padding:10px 12px;min-height:100px}
.empty-hint{text-align:center;padding:36px 20px;color:var(--t-text-secondary);font-size:13px}
.line-row{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.line-num{font-family:monospace;font-size:11px;color:var(--t-text-secondary);width:18px;text-align:right;flex-shrink:0}
.line-inp{flex:1;padding:5px 9px;font-family:monospace;font-size:12px;border:0.5px solid var(--t-border);border-radius:8px;background:var(--t-bg-secondary);color:var(--t-text-primary);outline:none}
.line-inp:focus{border-color:var(--t-border-secondary)}
.line-del{background:none;border:none;cursor:pointer;color:var(--t-text-secondary);font-size:15px;padding:0 3px;line-height:1;flex-shrink:0}
.line-del:hover{color:#c03}
.lines-foot{padding:7px 12px;border-top:0.5px solid var(--t-border);display:flex;gap:7px}
.out-head{display:flex;justify-content:space-between;align-items:center;padding:9px 13px;border-bottom:0.5px solid var(--t-border)}
.out-label{font-size:10px;font-weight:500;color:var(--t-text-secondary);text-transform:uppercase;letter-spacing:.9px}
#macro-out{padding:10px 13px;font-family:monospace;font-size:12px;min-height:52px;max-height:130px;overflow-y:auto;white-space:pre;line-height:1.75;background:var(--t-bg-secondary)}
.out-line{color:var(--t-text-primary);display:block}
@media(max-width:640px){.macro-layout{flex-direction:column}.cmd-browser{width:100%}}

/* ════ SHOUTMAKER ════ */
.sm-layout{display:flex;flex-direction:column;gap:12px}
.sm-panel{border:0.5px solid var(--t-border);border-radius:12px;overflow:hidden;background:var(--t-bg-primary)}
.sm-panel-head{padding:9px 13px;border-bottom:0.5px solid var(--t-border);display:flex;justify-content:space-between;align-items:center}
.sm-label{font-size:10px;font-weight:500;color:var(--t-text-secondary);text-transform:uppercase;letter-spacing:.9px}
.sm-channels{display:flex;flex-wrap:wrap;gap:5px;padding:10px 12px}
.ch-btn{padding:3px 12px;font-size:12px;border-radius:20px;border:0.5px solid var(--t-border);background:none;cursor:pointer;color:var(--t-text-secondary);font-family:monospace;transition:all .1s}
.ch-btn:hover{background:var(--t-bg-secondary)}
.ch-btn.active{background:var(--t-accent-bg);color:var(--t-accent-bg-text);border-color:var(--t-accent-hover)}
.sm-textarea{width:100%;padding:10px 13px;font-family:inherit;font-size:13px;border:none;resize:vertical;min-height:90px;background:var(--t-bg-secondary);color:var(--t-text-primary);outline:none;line-height:1.6;display:block}
.sm-options{display:flex;gap:4px 18px;padding:8px 13px;border-top:0.5px solid var(--t-border);align-items:center;flex-wrap:wrap}
.sm-opt{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--t-text-secondary);cursor:pointer}
.sm-opt input[type=checkbox]{cursor:pointer;accent-color:var(--t-accent)}
.sm-lim-inp{width:52px;padding:2px 6px;font-size:12px;border:0.5px solid var(--t-border-secondary);border-radius:8px;background:var(--t-bg-primary);color:var(--t-text-primary);outline:none;font-family:monospace;text-align:center}
.sm-result-rows{padding:6px}
.sm-line-row{display:flex;gap:7px;align-items:baseline;padding:5px 7px;border-radius:8px;margin-bottom:2px}
.sm-line-row:nth-child(even){background:var(--t-bg-secondary)}
.sm-line-num{font-family:monospace;font-size:11px;color:var(--t-text-secondary);width:18px;text-align:right;flex-shrink:0}
.sm-line-text{font-family:monospace;font-size:12px;flex:1;line-height:1.5;word-break:break-all;color:var(--t-text-primary)}
.sm-cmd-part{color:var(--t-cmd-name);font-weight:500}
.sm-wait-line{color:var(--t-text-secondary);font-style:italic}
.sm-line-chars{font-size:10px;color:var(--t-text-secondary);flex-shrink:0;min-width:40px;text-align:right}
.sm-line-chars.over{color:#c03;font-weight:500}
.sm-empty{text-align:center;padding:30px 20px;color:var(--t-text-secondary);font-size:13px;font-style:italic}
.sm-foot{padding:10px 13px;border-top:0.5px solid var(--t-border);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sm-warn{font-size:11px;color:#c03;line-height:1.4}
.sm-info-txt{font-size:11px;color:var(--t-text-secondary);line-height:1.4}
.sm-char-badge{display:inline-block;padding:1px 7px;border-radius:10px;font-size:10px;font-family:monospace;background:var(--t-bg-secondary);color:var(--t-text-secondary);border:0.5px solid var(--t-border)}
.btn-gen{padding:5px 16px;font-size:13px;font-weight:500;border-radius:8px;border:0.5px solid var(--t-btn-border);background:var(--t-btn-bg);color:var(--t-btn-text);cursor:pointer;font-family:inherit;transition:background .15s;white-space:nowrap}
.btn-gen:hover{background:var(--t-btn-hover)}

/* ════ PF DESCRIPTION ════ */
.pf-layout{display:flex;flex-direction:column;gap:12px}
.pf-panel{border:0.5px solid var(--t-border);border-radius:12px;overflow:hidden;background:var(--t-bg-primary)}
.pf-panel-head{padding:9px 13px;border-bottom:0.5px solid var(--t-border);display:flex;justify-content:space-between;align-items:center}
.pf-label{font-size:10px;font-weight:500;color:var(--t-text-secondary);text-transform:uppercase;letter-spacing:.9px}
.pf-templates{display:flex;gap:5px;padding:10px 12px;flex-wrap:wrap}
.pf-tpl-btn{padding:3px 11px;font-size:12px;border-radius:20px;border:0.5px solid var(--t-border);background:none;cursor:pointer;color:var(--t-text-secondary);font-family:inherit;white-space:nowrap;transition:all .1s}
.pf-tpl-btn:hover{background:var(--t-bg-secondary)}
.pf-tpl-btn.active{background:var(--t-accent-bg);color:var(--t-accent-bg-text);border-color:var(--t-accent-hover)}
.pf-counter{font-size:12px;color:var(--t-text-secondary);font-family:monospace}
.pf-counter.warn{color:#BA7517;font-weight:500}
.pf-counter.over{color:#c03;font-weight:500}
.pf-inputs{padding:10px 13px;display:flex;flex-direction:column;gap:6px;background:var(--t-bg-secondary)}
.pf-line-wrap{display:flex;align-items:center;gap:8px}
.pf-line-label{font-size:10px;font-weight:500;color:var(--t-text-secondary);text-transform:uppercase;letter-spacing:.8px;flex-shrink:0;width:36px}
.pf-line-inp{flex:1;padding:6px 10px;font-size:13px;border:0.5px solid var(--t-border);border-radius:8px;background:var(--t-bg-primary);color:var(--t-text-primary);outline:none;font-family:inherit}
.pf-line-inp:focus{border-color:var(--t-border-secondary)}
.pf-line-chars{font-size:10px;color:var(--t-text-secondary);flex-shrink:0;min-width:32px;text-align:right;font-family:monospace}
.pf-line-chars.warn{color:#BA7517}
.pf-tag-cats{display:flex;gap:4px;padding:7px 12px;border-bottom:0.5px solid var(--t-border);flex-wrap:wrap}
.pf-tag-cat{padding:2px 8px;font-size:11px;border-radius:20px;border:0.5px solid var(--t-border);background:none;cursor:pointer;color:var(--t-text-secondary);font-family:inherit;transition:all .1s}
.pf-tag-cat.active{background:var(--t-accent-bg);color:var(--t-accent-bg-text);border-color:var(--t-accent-hover)}
.pf-tags{display:flex;flex-wrap:wrap;gap:5px;padding:8px 12px}
.pf-tag-btn{padding:3px 10px;font-size:12px;border-radius:20px;border:0.5px solid var(--t-border);background:none;cursor:pointer;color:var(--t-text-secondary);font-family:monospace;transition:all .1s}
.pf-tag-btn:hover{background:var(--t-bg-secondary);color:var(--t-text-primary)}
.pf-preview-box{padding:10px 13px;font-family:monospace;font-size:12px;line-height:1.75;background:var(--t-bg-secondary);min-height:48px;white-space:pre-wrap;word-break:break-word;color:var(--t-text-primary)}
.pf-preview-empty{text-align:center;padding:20px;font-size:12px;color:var(--t-text-secondary);font-style:italic}
.pf-foot{padding:10px 13px;border-top:0.5px solid var(--t-border);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pf-tip{font-size:11px;color:var(--t-text-secondary);line-height:1.4}

/* ════ PLACEHOLDER REF ════ */
.ph-wrap{border:0.5px solid var(--t-border);border-radius:12px;overflow:hidden;background:var(--t-bg-primary)}
.ph-head{padding:9px 13px;border-bottom:0.5px solid var(--t-border)}
.ph-head-label{font-size:10px;font-weight:500;color:var(--t-text-secondary);text-transform:uppercase;letter-spacing:.9px}
.ph-desc{padding:9px 14px 4px;font-size:13px;color:var(--t-text-secondary)}
.ph-table{width:100%;border-collapse:collapse;font-size:13px}
.ph-table th{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.8px;color:var(--t-text-secondary);padding:7px 13px;text-align:left;border-bottom:0.5px solid var(--t-border)}
.ph-table td{padding:7px 13px;border-bottom:0.5px solid var(--t-border);color:var(--t-text-primary)}
.ph-table tr:last-child td{border-bottom:none}
.ph-table tr:nth-child(even) td{background:var(--t-bg-secondary)}
.ph-mono{font-family:monospace;color:var(--t-cmd-name)}

/* ════ STAFF SCHEDULER ════ */
.ss-page{display:flex;flex-direction:column;gap:0;height:calc(100vh - 90px)}
.ss-tabs{display:flex;align-items:center;gap:0;border-bottom:0.5px solid var(--t-border);background:var(--t-bg-primary);padding:0 14px;flex-shrink:0}
.ss-tab{padding:9px 16px;font-size:13px;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;color:var(--t-text-secondary);font-family:inherit;transition:color .15s;white-space:nowrap}
.ss-tab:hover{color:var(--t-accent-text)}
.ss-tab.active{color:var(--t-accent-text);border-bottom-color:var(--t-accent);font-weight:500}
.ss-tab-actions{margin-left:auto;display:flex;gap:6px;align-items:center;padding:6px 0}
.ss-tab-content{display:none;flex:1;overflow:auto}
.ss-tab-content.active{display:flex;flex-direction:column}

/* Event bar */
.ss-event-bar{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:0.5px solid var(--t-border);background:var(--t-bg-primary);flex-shrink:0;flex-wrap:wrap}
.ss-event-name{flex:1;min-width:180px;padding:6px 10px;font-size:14px;font-weight:500;border:0.5px solid var(--t-border);border-radius:6px;background:var(--t-bg-secondary);color:var(--t-text-primary);font-family:inherit;outline:none}
.ss-event-name:focus{border-color:var(--t-border-secondary)}
.ss-event-date{padding:6px 10px;font-size:13px;border:0.5px solid var(--t-border);border-radius:6px;background:var(--t-bg-secondary);color:var(--t-text-primary);font-family:inherit;outline:none;cursor:pointer}
.ss-clear-btn{padding:5px 13px;font-size:12px;border-radius:6px;border:0.5px solid var(--t-border);background:none;color:var(--t-text-secondary);cursor:pointer;font-family:inherit}
.ss-clear-btn:hover{background:var(--t-bg-secondary);color:#dc2626}

/* Grid */
.ss-grid-wrap{flex:1;overflow:auto;padding:0}
.ss-grid{border-collapse:collapse;min-width:100%;font-size:13px}
.ss-th{padding:8px 12px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.8px;color:var(--t-text-secondary);background:var(--t-bg-primary);border:0.5px solid var(--t-border);text-align:left;white-space:nowrap;position:sticky;top:0;z-index:3}
.ss-th-time{position:sticky;left:0;top:0;z-index:4;min-width:90px}
.ss-td-time{padding:8px 12px;font-size:12px;font-weight:500;color:var(--t-text-secondary);font-family:monospace;background:var(--t-bg-primary);border:0.5px solid var(--t-border);white-space:nowrap;position:sticky;left:0;z-index:2;min-width:90px}
.ss-cell{padding:6px 8px;border:0.5px solid var(--t-border);vertical-align:top;min-width:140px;cursor:pointer;position:relative;background:var(--t-bg-primary);transition:background .1s}
.ss-cell:hover{background:var(--t-bg-secondary)}
.ss-cell.ss-cell-open{background:var(--t-accent-bg)}
.ss-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 8px;border-radius:20px;font-size:11px;font-weight:500;margin:2px;line-height:1.4;white-space:nowrap}
.ss-chip-x{background:none;border:none;cursor:pointer;font-size:13px;padding:0;line-height:1;opacity:.7;color:inherit}
.ss-chip-x:hover{opacity:1}
.ss-add-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:0.5px dashed var(--t-border);background:none;cursor:pointer;color:var(--t-text-secondary);font-size:14px;line-height:1;margin:2px;transition:all .1s;vertical-align:middle}
.ss-add-btn:hover{border-color:var(--t-accent);color:var(--t-accent-text);background:var(--t-accent-bg)}
.ss-dropdown{position:absolute;top:calc(100% + 2px);left:6px;z-index:10;background:var(--t-bg-primary);border:0.5px solid var(--t-border-secondary);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.25);min-width:160px;max-height:200px;overflow-y:auto;padding:4px}
.ss-drop-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;background:none;border:none;cursor:pointer;color:var(--t-text-primary);font-size:13px;font-family:inherit;border-radius:5px;text-align:left}
.ss-drop-item:hover{background:var(--t-bg-secondary)}
.ss-drop-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ss-dropdown-empty{padding:10px 12px;font-size:12px;color:var(--t-text-secondary);pointer-events:none}

/* Roster tab */
.ss-roster-wrap{display:flex;gap:16px;padding:16px;flex:1;overflow:auto;flex-wrap:wrap;align-items:flex-start}
.ss-roster-list-panel{flex:1;min-width:260px;display:flex;flex-direction:column;gap:6px}
.ss-roster-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border:0.5px solid var(--t-border);border-radius:8px;background:var(--t-bg-primary)}
.ss-roster-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.ss-roster-name{flex:1;font-size:13px;color:var(--t-text-primary)}
.ss-roster-actions{display:flex;gap:5px}
.ss-add-panel{width:280px;flex-shrink:0;border:0.5px solid var(--t-border);border-radius:10px;background:var(--t-bg-primary);padding:14px;display:flex;flex-direction:column;gap:10px}
.ss-add-panel-head{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.9px;color:var(--t-text-secondary)}
.ss-input{width:100%;padding:7px 10px;font-size:13px;border:0.5px solid var(--t-border);border-radius:6px;background:var(--t-bg-secondary);color:var(--t-text-primary);font-family:inherit;outline:none}
.ss-input:focus{border-color:var(--t-border-secondary)}
.ss-palette-label{font-size:11px;color:var(--t-text-secondary)}
.ss-palette{display:flex;flex-wrap:wrap;gap:6px}
.ss-swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s,border-color .1s;padding:0}
.ss-swatch:hover{transform:scale(1.15)}
.ss-swatch.active{border-color:var(--t-text-primary);transform:scale(1.1)}
.ss-empty-roster{padding:24px;text-align:center;font-size:13px;color:var(--t-text-secondary);border:0.5px dashed var(--t-border);border-radius:8px}

/* Setup tab */
.ss-setup-wrap{display:flex;gap:16px;padding:16px;flex:1;overflow:auto;flex-wrap:wrap;align-items:flex-start}
.ss-setup-panel{flex:1;min-width:240px;border:0.5px solid var(--t-border);border-radius:10px;background:var(--t-bg-primary);overflow:hidden}
.ss-setup-head{padding:10px 14px;border-bottom:0.5px solid var(--t-border);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.9px;color:var(--t-text-secondary);display:flex;justify-content:space-between;align-items:center}
.ss-setup-item{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:0.5px solid var(--t-border)}
.ss-setup-item:last-child{border-bottom:none}
.ss-setup-item-label{flex:1;font-size:13px;color:var(--t-text-primary)}
.ss-setup-input{flex:1;padding:4px 8px;font-size:13px;border:0.5px solid var(--t-border);border-radius:5px;background:var(--t-bg-secondary);color:var(--t-text-primary);font-family:inherit;outline:none}
.ss-setup-add-row{padding:8px 12px;display:flex;gap:6px}
.ss-icon-btn{background:none;border:0.5px solid var(--t-border);border-radius:5px;padding:3px 8px;cursor:pointer;color:var(--t-text-secondary);font-size:12px;font-family:inherit}
.ss-icon-btn:hover{background:var(--t-bg-secondary);color:#dc2626}
.ss-icon-btn.add{color:var(--t-accent-text);border-color:var(--t-btn-border)}
.ss-icon-btn.add:hover{background:var(--t-accent-bg)}

@media(max-width:640px){
  .ss-tab-actions{gap:4px}
  .ss-roster-wrap,.ss-setup-wrap{flex-direction:column}
  .ss-add-panel{width:100%}
}

/* ════ EVENT CALENDAR ════ */
.ec-page{display:flex;flex-direction:column;height:calc(100vh - 90px)}
.ec-tabs{display:flex;align-items:center;border-bottom:0.5px solid var(--t-border);background:var(--t-bg-primary);padding:0 14px;flex-shrink:0;flex-wrap:wrap}
.ec-tab{padding:9px 16px;font-size:13px;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;color:var(--t-text-secondary);font-family:inherit;transition:color .15s;white-space:nowrap}
.ec-tab:hover{color:var(--t-accent-text)}
.ec-tab.active{color:var(--t-accent-text);border-bottom-color:var(--t-accent);font-weight:500}
.ec-tab-right{margin-left:auto;display:flex;gap:8px;align-items:center;padding:6px 0}
.ec-tab-content{display:none;flex:1;overflow:hidden;flex-direction:column}
.ec-tab-content.active{display:flex}
.ec-profile-select{padding:4px 10px;font-size:12px;border:0.5px solid var(--t-border-secondary);border-radius:8px;background:var(--t-bg-secondary);color:var(--t-text-primary);font-family:inherit;cursor:pointer;outline:none;max-width:180px}
/* Month nav */
.ec-month-nav{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:0.5px solid var(--t-border);background:var(--t-bg-primary);flex-shrink:0}
.ec-month-label{font-size:16px;font-weight:500;color:var(--t-text-primary);min-width:160px;text-align:center}
.ec-nav-btn{padding:4px 12px;font-size:15px;border:0.5px solid var(--t-border);border-radius:8px;background:none;cursor:pointer;color:var(--t-text-secondary);font-family:inherit;transition:all .1s;line-height:1}
.ec-nav-btn:hover{background:var(--t-bg-secondary);color:var(--t-text-primary)}
.ec-today-btn{padding:4px 12px;font-size:12px;border:0.5px solid var(--t-btn-border);border-radius:8px;background:var(--t-btn-bg);color:var(--t-btn-text);cursor:pointer;font-family:inherit}
.ec-today-btn:hover{background:var(--t-btn-hover)}
/* Calendar grid */
.ec-grid-wrap{flex:1;overflow:auto}
.ec-grid{display:grid;grid-template-columns:repeat(7,1fr);border-left:0.5px solid var(--t-border);border-top:0.5px solid var(--t-border);min-width:560px}
.ec-dow{padding:7px 10px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.8px;color:var(--t-text-secondary);border-right:0.5px solid var(--t-border);border-bottom:0.5px solid var(--t-border);background:var(--t-bg-primary);text-align:center}
.ec-cell{border-right:0.5px solid var(--t-border);border-bottom:0.5px solid var(--t-border);padding:4px;min-height:100px;cursor:pointer;background:var(--t-bg-primary);transition:background .1s;position:relative}
.ec-cell:hover{background:var(--t-bg-secondary)}
.ec-cell.other-month{background:var(--t-bg-body);opacity:.45}
.ec-cell.today{background:var(--t-accent-bg)}
.ec-cell.today .ec-day-num{color:var(--t-accent-text);font-weight:700}
.ec-day-num{font-size:12px;font-weight:500;color:var(--t-text-secondary);padding:2px 4px;line-height:1;margin-bottom:3px;display:inline-block}
.ec-chip{display:block;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:1px 2px;cursor:pointer;line-height:1.5;transition:opacity .1s}
.ec-chip:hover{opacity:.8}
.ec-chip-time{font-size:10px;opacity:.85;margin-right:2px}
.ec-more{font-size:10px;color:var(--t-text-secondary);padding:1px 6px;cursor:pointer;display:block}
.ec-more:hover{color:var(--t-accent-text)}
/* Upcoming tab */
.ec-upcoming-wrap{padding:16px;max-width:760px;margin:0 auto;width:100%;box-sizing:border-box}
.ec-upcoming-month{margin-bottom:24px}
.ec-upcoming-month-label{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.9px;color:var(--t-text-secondary);margin-bottom:8px;padding-bottom:6px;border-bottom:0.5px solid var(--t-border)}
.ec-upcoming-copy{padding:2px 10px;font-size:11px;border:0.5px solid var(--t-border);border-radius:6px;background:none;cursor:pointer;color:var(--t-text-secondary);font-family:inherit;flex-shrink:0;transition:all .15s}
.ec-upcoming-copy:hover{background:var(--t-bg-secondary);color:var(--t-accent-text)}
.ec-upcoming-row{display:flex;align-items:flex-start;gap:12px;padding:8px 10px;border-radius:8px;margin-bottom:4px;border:0.5px solid var(--t-border);background:var(--t-bg-primary);cursor:pointer;transition:background .1s}
.ec-upcoming-row:hover{background:var(--t-bg-secondary)}
.ec-upcoming-date{font-size:11px;color:var(--t-text-secondary);min-width:96px;flex-shrink:0;font-family:monospace;padding-top:3px}
.ec-upcoming-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px}
.ec-upcoming-info{flex:1;min-width:0}
.ec-upcoming-title{font-size:13px;color:var(--t-text-primary);font-weight:500}
.ec-upcoming-meta{font-size:11px;color:var(--t-text-secondary);margin-top:2px}
.ec-upcoming-notes{font-size:11px;color:var(--t-text-secondary);margin-top:3px;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-upcoming-empty{text-align:center;padding:48px 20px;color:var(--t-text-secondary);font-size:13px}
/* Calendars tab */
.ec-cal-tab-wrap{display:flex;gap:16px;padding:16px;flex:1;overflow:auto;flex-wrap:wrap;align-items:flex-start}
.ec-cal-list{flex:1;min-width:260px;display:flex;flex-direction:column;gap:6px}
.ec-cal-item{display:flex;align-items:center;gap:10px;padding:10px 13px;border:0.5px solid var(--t-border);border-radius:8px;background:var(--t-bg-primary);transition:border-color .15s}
.ec-cal-item.active-cal{border-color:var(--t-accent);background:var(--t-accent-bg)}
.ec-cal-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.ec-cal-name{flex:1;font-size:13px;color:var(--t-text-primary);font-weight:500}
.ec-cal-badge{font-size:11px;color:var(--t-text-secondary)}
.ec-cal-actions{display:flex;gap:5px;flex-shrink:0;align-items:center}
.ec-add-panel{width:280px;flex-shrink:0;border:0.5px solid var(--t-border);border-radius:10px;background:var(--t-bg-primary);padding:14px;display:flex;flex-direction:column;gap:10px;align-self:flex-start}
.ec-add-head{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.9px;color:var(--t-text-secondary)}
.ec-palette{display:flex;flex-wrap:wrap;gap:6px}
.ec-swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s,border-color .1s;padding:0;display:inline-block;flex-shrink:0}
.ec-swatch:hover{transform:scale(1.15)}
.ec-swatch.active{border-color:var(--t-text-primary);transform:scale(1.1)}
/* Modal */
.ec-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.ec-modal{background:var(--t-bg-primary);border:0.5px solid var(--t-border-secondary);border-radius:14px;width:min(520px,100%);max-height:90vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,.5)}
.ec-modal-head{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:0.5px solid var(--t-border);flex-wrap:wrap}
.ec-modal-title{font-size:15px;font-weight:500;color:var(--t-text-primary)}
.ec-modal-close{background:none;border:none;cursor:pointer;font-size:20px;color:var(--t-text-secondary);padding:0;line-height:1;margin-left:auto}
.ec-modal-close:hover{color:var(--t-text-primary)}
.ec-modal-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.ec-modal-foot{padding:12px 18px;border-top:0.5px solid var(--t-border);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ec-field{display:flex;flex-direction:column;gap:4px}
.ec-field-row{display:flex;gap:10px;flex-wrap:wrap}
.ec-field-row>.ec-field{flex:1;min-width:120px}
.ec-label{font-size:11px;font-weight:500;color:var(--t-text-secondary);text-transform:uppercase;letter-spacing:.7px}
.ec-opt{font-size:10px;font-weight:400;opacity:.65;margin-left:3px;text-transform:none;letter-spacing:0}
.ec-input{padding:7px 10px;font-size:13px;border:0.5px solid var(--t-border);border-radius:7px;background:var(--t-bg-secondary);color:var(--t-text-primary);font-family:inherit;outline:none;width:100%;box-sizing:border-box}
.ec-input:focus{border-color:var(--t-border-secondary)}
.ec-select{padding:7px 10px;font-size:13px;border:0.5px solid var(--t-border);border-radius:7px;background:var(--t-bg-secondary);color:var(--t-text-primary);font-family:inherit;outline:none;width:100%;cursor:pointer;box-sizing:border-box}
.ec-select:focus{border-color:var(--t-border-secondary)}
.ec-textarea{padding:7px 10px;font-size:13px;border:0.5px solid var(--t-border);border-radius:7px;background:var(--t-bg-secondary);color:var(--t-text-primary);font-family:inherit;outline:none;width:100%;resize:vertical;min-height:70px;box-sizing:border-box;line-height:1.5}
.ec-textarea:focus{border-color:var(--t-border-secondary)}
.ec-del-btn{padding:5px 13px;font-size:12px;border-radius:7px;border:0.5px solid #dc2626;background:none;color:#dc2626;cursor:pointer;font-family:inherit;transition:background .15s,color .15s;white-space:nowrap}
.ec-del-btn:hover{background:#dc2626;color:#fff}
.ec-del-btn-soft{padding:5px 13px;font-size:12px;border-radius:7px;border:0.5px solid var(--t-border);background:none;color:var(--t-text-secondary);cursor:pointer;font-family:inherit;white-space:nowrap;transition:border-color .15s,color .15s}
.ec-del-btn-soft:hover{border-color:#dc2626;color:#dc2626}
.ec-recurring-badge{font-size:10px;padding:2px 8px;border-radius:10px;background:var(--t-accent-bg);color:var(--t-accent-text);border:0.5px solid var(--t-accent-hover);font-weight:500;white-space:nowrap}
@media(max-width:640px){
  .ec-cell{min-height:60px}
  .ec-chip{font-size:10px;padding:1px 4px}
  .ec-chip-time{display:none}
  .ec-month-label{font-size:13px;min-width:100px}
  .ec-add-panel{width:100%}
}

/* ════ CONTACT PAGE ════ */
.ct-wrap{max-width:640px;margin:0 auto;padding:28px 16px 48px}
.ct-heading{font-size:22px;font-weight:500;color:var(--t-text-primary);margin-bottom:6px}
.ct-sub{font-size:14px;color:var(--t-text-secondary);margin-bottom:24px;line-height:1.6}
.ct-panel{border:0.5px solid var(--t-border);border-radius:12px;overflow:hidden;background:var(--t-bg-primary)}
.ct-panel-head{padding:12px 16px;border-bottom:0.5px solid var(--t-border);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.9px;color:var(--t-text-secondary)}
.ct-cats{display:flex;flex-wrap:wrap;gap:7px;padding:14px 16px;border-bottom:0.5px solid var(--t-border)}
.ct-cat{padding:6px 16px;font-size:13px;border-radius:20px;border:0.5px solid var(--t-border);background:none;cursor:pointer;color:var(--t-text-secondary);font-family:inherit;transition:all .15s}
.ct-cat:hover{background:var(--t-bg-secondary);color:var(--t-text-primary)}
.ct-cat.active{background:var(--t-accent-bg);color:var(--t-accent-bg-text);border-color:var(--t-accent-hover);font-weight:500}
.ct-fields{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.ct-row{display:flex;gap:12px;flex-wrap:wrap}
.ct-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:180px}
.ct-field-full{display:flex;flex-direction:column;gap:5px}
.ct-label{font-size:12px;font-weight:500;color:var(--t-text-secondary)}
.ct-optional{font-size:11px;font-weight:400;opacity:.65;margin-left:4px}
.ct-input{padding:8px 11px;font-size:13px;border:0.5px solid var(--t-border);border-radius:7px;background:var(--t-bg-secondary);color:var(--t-text-primary);font-family:inherit;outline:none;transition:border-color .15s}
.ct-input:focus{border-color:var(--t-border-secondary)}
.ct-textarea{padding:10px 11px;font-size:13px;border:0.5px solid var(--t-border);border-radius:7px;background:var(--t-bg-secondary);color:var(--t-text-primary);font-family:inherit;outline:none;resize:vertical;min-height:140px;line-height:1.6;transition:border-color .15s}
.ct-textarea:focus{border-color:var(--t-border-secondary)}
.ct-foot{padding:12px 16px;border-top:0.5px solid var(--t-border);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ct-submit{padding:8px 24px;font-size:13px;font-weight:500;border-radius:7px;border:0.5px solid var(--t-btn-border);background:var(--t-btn-bg);color:var(--t-btn-text);cursor:pointer;font-family:inherit;transition:background .15s}
.ct-submit:hover{background:var(--t-btn-hover)}
.ct-submit:disabled{opacity:.5;cursor:default}
.ct-status{font-size:13px;line-height:1.4}
.ct-status.ok{color:#16a34a}
.ct-status.err{color:#dc2626}
.ct-notice{margin-top:16px;padding:10px 14px;border-radius:8px;background:var(--t-bg-secondary);font-size:12px;color:var(--t-text-secondary);line-height:1.5;border-left:2px solid var(--t-border-secondary)}