/* Gantry · hitec.css
   Hi-Tec workspace, sub-tabs, toasts, start gates, login and account chrome,
   restyled on the digitalise.agency system. Colour map:
     primary = var(--accent)   surface = var(--surface-1)
     border  = var(--border)   text    = var(--ink-1)
     muted   = var(--ink-2)    success = var(--green)
     warning = var(--amber)    info    = var(--accent-hover)
     danger  = var(--red)
   Every selector is unchanged; only declarations moved. */

  /* ---- workspace panels ---- */
  .tab-panel[hidden]{display:none}

  /* ---- sub-tabs (Media Post / Carousel, inside the Salman panel) ---- */
  .subtabs{display:inline-flex;gap:4px;background:var(--bg-1);border:1px solid var(--border);border-radius:10px;padding:4px;margin-bottom:18px}
  .subtab-btn{border:none;background:transparent;color:var(--ink-2);font:inherit;font-family:var(--font-display);font-weight:600;font-size:.84rem;
    padding:8px 18px;border-radius:8px;cursor:pointer;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
  .subtab-btn:hover{color:var(--ink-1)}
  .subtab-btn.active{background:var(--accent);color:var(--accent-ink)}
  .subtab-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

  /* ---- in-card PDF viewer (Carousel cards) ---- */
  .car-file-name{font-size:.82rem;color:var(--ink-2);margin-bottom:9px;word-break:break-all}
  .car-pdf{position:relative;border-radius:10px;overflow:hidden;background:var(--bg-1);border:1px solid var(--border)}
  .car-pdf-img{width:100%;display:block;min-height:180px;object-fit:contain;background:var(--bg-1)}
  .car-pdf-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:40px;height:40px;border-radius:50%;
    border:1px solid var(--border);background:rgba(5,7,13,.78);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);padding:0}
  .car-pdf-arrow:hover:not(:disabled){border-color:var(--accent);color:var(--accent-hover)}
  .car-pdf-arrow:disabled{opacity:.3;cursor:not-allowed}
  .car-pdf-prev{left:8px} .car-pdf-next{right:8px}
  .car-pdf-page{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:4;
    background:rgba(5,7,13,.78);color:#fff;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px}
  .car-pdf-frame{width:100%;height:520px;display:block;border:0;background:#fff}
  .car-pdf-bar{display:flex;justify-content:flex-end;margin-top:8px}
  .car-file-ph{height:200px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);
    border:1px dashed var(--border);border-radius:10px;background:var(--bg-1)}

  /* ---- layout ---- */
  .auto-wrap{max-width:1100px;margin:0 auto}
  .auto-zoneA{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
  @media (max-width:640px){.auto-zoneA{grid-template-columns:1fr}}
  .auto-card{border:1px solid var(--border);background:var(--surface-1);border-radius:var(--radius);padding:16px}
  .auto-card h3{margin:0 0 12px;font-size:.95rem;font-weight:600;color:var(--ink-1)}
  .auto-card-foot{margin-top:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .auto-overline{font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
    font-family:var(--font-display);font-weight:600}

  /* ---- inputs ---- */
  .auto-input,.auto-textarea{width:100%;background:var(--bg-1);border:1px solid var(--border);color:var(--ink-1);
    border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;line-height:1.6;transition:border-color var(--dur-1) var(--ease)}
  .auto-textarea{resize:vertical;min-height:92px}
  .auto-input:focus,.auto-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(25,103,255,.18)}
  .auto-input::placeholder,.auto-textarea::placeholder{color:var(--ink-3)}
  .mb8{margin-bottom:8px}
  .auto-field-msg{font-size:12px;min-height:16px}
  .auto-field-msg.ok{color:var(--green)}
  .auto-field-msg.err{color:var(--red)}

  /* ---- buttons / spinners ---- */
  .btn-spin{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;animation:spin .7s linear infinite;vertical-align:middle}
  .btn-ghost .btn-spin{border-color:rgba(25,103,255,.35);border-top-color:var(--accent-hover)}
  .btn-mini{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);
    color:var(--ink-2);font:inherit;font-size:12px;
    font-weight:600;padding:5px 10px;border-radius:8px;cursor:pointer;
    transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
  .btn-mini svg{width:14px;height:14px;flex:none}
  .caption-controls .btn-mini{height:42px}   /* match the tick icon-btn height */
  .btn-mini:hover{color:var(--ink-1);border-color:#33405c}
  .btn-mini:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
  .btn-primary:disabled,.btn-ghost:disabled,.btn-mini:disabled,.auto-pill:disabled{opacity:.5;cursor:not-allowed}

  /* ---- zone B toolbar + summary ---- */
  .auto-toolbar{position:sticky;top:var(--header-h,0);z-index:10;display:flex;align-items:center;justify-content:space-between;
    gap:14px;flex-wrap:wrap;background:var(--surface-1);border:1px solid var(--border);border-radius:12px;
    padding:12px 16px;margin-bottom:12px}
  .auto-toolbar .left{display:flex;align-items:center;gap:12px}
  .auto-selcount{font-size:14px;color:var(--ink-2);font-weight:600}
  .auto-summary{font-size:12px;color:var(--ink-3);margin-bottom:12px}

  /* ---- pagination (50 rows per page) ---- */
  .auto-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}
  .auto-pagination:empty{display:none}
  .auto-pagenums{display:flex;gap:4px;flex-wrap:wrap}
  .auto-pagenum{min-width:34px;height:34px;padding:0 8px;border:1px solid var(--border);background:var(--surface-1);
    color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;border-radius:8px;cursor:pointer;
    transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
  .auto-pagenum:hover{color:var(--ink-1);border-color:#33405c}
  .auto-pagenum.active{background:var(--accent);color:var(--accent-ink);border-color:transparent}
  .auto-pageinfo{font-size:12px;color:var(--ink-3);width:100%;text-align:center}

  /* ---- styled checkboxes (tri-state) ---- */
  .auto-check{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1px solid var(--border);
    border-radius:5px;background:var(--surface-2);cursor:pointer;position:relative;flex:none;transition:border-color var(--dur-1) var(--ease)}
  .auto-check:hover{border-color:var(--accent)}
  .auto-check:checked,.auto-check:indeterminate{background:var(--accent);border-color:var(--accent)}
  .auto-check:checked::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;
    border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .auto-check:indeterminate::after{content:"";position:absolute;left:3px;top:7px;width:10px;height:2px;background:#fff}
  .auto-check:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

  /* ---- rows ---- */
  .auto-rows{display:flex;flex-direction:column;gap:6px}
  .auto-rowbar{display:flex;align-items:center;gap:12px;background:var(--surface-1);border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:12px 16px;cursor:pointer;
    transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
  .auto-rowbar:hover{border-color:#33405c;background:var(--surface-2)}
  .auto-rowbar:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
  .auto-rid{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink-3);width:48px;flex:none}
  @media (max-width:480px){.auto-rid{display:none}}   /* give the title room on small phones */
  .auto-rtitle{flex:1;min-width:0;font-size:14px;font-weight:500;color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .auto-chev{width:24px;flex:none;text-align:center;color:var(--ink-3);transition:transform .2s}
  .auto-row.open .auto-chev{transform:rotate(180deg)}
  .auto-row.open .auto-rowbar{border-radius:var(--radius-sm) var(--radius-sm) 0 0;border-bottom-color:transparent}

  /* ---- badges ---- */
  .auto-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px;border:1px solid var(--border);
    background:var(--surface-0);color:var(--ink-2);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
  .auto-badge.amber{color:var(--amber);border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.08)}
  .auto-badge.info{color:var(--accent-hover);border-color:rgba(63,130,255,.4);background:rgba(25,103,255,.1)}
  .auto-badge.green{color:var(--green);border-color:rgba(52,211,153,.4);background:var(--green-dim)}
  .auto-badge.muted{color:var(--ink-3)}
  .auto-badge .mini-spin{width:11px;height:11px;border:2px solid rgba(147,160,184,.3);border-top-color:var(--ink-2);
    border-radius:50%;animation:spin .7s linear infinite}

  /* ---- expanded panel ---- */
  .auto-panel{max-height:0;overflow:hidden;transition:max-height .25s ease;border:none;
    border-radius:0 0 var(--radius-sm) var(--radius-sm);background:var(--bg-1);margin-top:-1px}
  .auto-row.open .auto-panel{max-height:3000px;border:1px solid var(--border);border-top:none}
  .auto-panel-inner{padding:16px}
  .auto-sec + .auto-sec{border-top:1px solid var(--border);margin-top:16px;padding-top:16px}
  .auto-seclabel{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
    font-family:var(--font-display);font-weight:600;margin-bottom:12px}

  /* ---- row data key/value ---- */
  .auto-kv{display:grid;grid-template-columns:170px 1fr;gap:8px 16px;font-size:14px;margin:0}
  @media (max-width:560px){.auto-kv{grid-template-columns:1fr}}
  .auto-kv dt{color:var(--ink-2);font-size:12px}
  .auto-kv dd{margin:0;color:var(--ink-1)}
  .auto-kv dd.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
  .auto-kv dd.auto-brand{font-size:12px;color:var(--ink-2)}
  .tint-danger{color:var(--red)}
  .tint-success{color:var(--green)}

  /* ---- POV cards ---- */
  .auto-class{font-size:12px;color:var(--ink-2);font-style:italic;margin-bottom:12px}
  .auto-pov-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  @media (max-width:560px){.auto-pov-grid{grid-template-columns:1fr}}
  .auto-pov{position:relative;border:1px solid var(--border);background:var(--surface-1);border-radius:11px;
    padding:12px;cursor:pointer;transition:border-color var(--dur-1) var(--ease)}
  .auto-pov:hover{border-color:var(--accent)}
  .auto-pov:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
  .auto-pov .pid{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--ink-3)}
  .auto-pov .ptitle{font-size:14px;font-weight:600;color:var(--ink-1);margin:4px 0}
  .auto-pov .pangle{font-size:12px;color:var(--ink-2)}
  .auto-pov.sel{border:2px solid var(--accent);background:rgba(25,103,255,.08);padding:11px}
  .auto-pov .pcheck{display:none;position:absolute;top:8px;right:10px;color:var(--accent-hover);font-weight:700}
  .auto-pov.sel .pcheck{display:block}

  /* ---- script cards ---- */
  .auto-script{border:1px solid var(--border);background:var(--surface-1);border-radius:11px;margin-bottom:10px;
    cursor:pointer;transition:border-color var(--dur-1) var(--ease);overflow:hidden}
  .auto-script:hover{border-color:var(--green)}
  .auto-script:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
  .auto-script.sel{border:2px solid var(--green);background:var(--green-dim)}
  .auto-script .shead{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;
    border-bottom:1px solid var(--border-soft)}
  .auto-script .sname{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;font-weight:700;color:var(--ink-1)}
  .auto-script .scontent{padding:14px;font-size:14px;line-height:1.7;white-space:pre-wrap;color:var(--ink-1)}
  .auto-hook{font-size:12px;font-style:italic;color:var(--ink-2);border-left:2px solid var(--accent);
    padding-left:10px;margin-bottom:12px}
  .auto-research-toggle{font-size:12px;color:var(--ink-2);cursor:pointer;user-select:none;margin-bottom:8px}
  .auto-research-body{font-size:12px;color:var(--ink-2);line-height:1.6;white-space:pre-wrap;display:none;margin-bottom:8px}
  .auto-research-body.show{display:block}
  .auto-row-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

  /* ---- repurposed output ---- */
  .auto-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .auto-pill{border:1px solid var(--border);background:transparent;color:var(--ink-2);font:inherit;font-size:12px;
    font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer;
    transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
  .auto-pill:hover{color:var(--ink-1)}
  .auto-pill.active{background:var(--accent);color:var(--accent-ink);border-color:transparent}
  .auto-pill:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
  .auto-output{position:relative;border:1px solid var(--border);background:var(--surface-1);border-radius:11px;
    padding:14px;padding-right:84px;font-size:14px;line-height:1.7;white-space:pre-wrap;color:var(--ink-1)}
  .auto-copy{position:absolute;top:10px;right:10px}
  .auto-thread-item{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);background:var(--surface-1);
    border-radius:10px;padding:12px;margin-bottom:8px}
  .auto-thread-item .num{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--ink-3);font-size:12px;flex:none}
  .auto-thread-item .txt{flex:1;font-size:14px;line-height:1.6;white-space:pre-wrap;color:var(--ink-1)}
  .auto-inline-err{color:var(--red);font-size:12px;margin-top:8px}

  /* ---- skeleton loaders ---- */
  .auto-skel{height:46px;border-radius:var(--radius-sm);margin-bottom:6px;
    background:linear-gradient(90deg,var(--surface-1),var(--surface-2),var(--surface-1));background-size:200% 100%;
    animation:shimmer 1.3s linear infinite}
  @keyframes shimmer{to{background-position:-200% 0}}

  /* ---- toasts ---- */
  .toast-wrap{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px}
  .toast{width:280px;border:1px solid var(--border);border-radius:11px;padding:12px 14px;font-size:13px;font-weight:600;
    background:var(--surface-2);color:var(--ink-1);box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;
    opacity:1;transition:opacity .3s}
  .toast.hide{opacity:0}
  .toast.success{border-color:rgba(52,211,153,.4);color:var(--green)}
  .toast.error{border-color:rgba(251,113,133,.4);color:var(--red)}
  .toast.info{border-color:rgba(63,130,255,.4);color:var(--accent-hover)}

  /* ---- start gate (per-tab launch screen) ---- */
  .start-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-height:380px;gap:10px;text-align:center;padding:24px}
  .start-gate[hidden]{display:none}
  .start-icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
    background:var(--surface-1);border:1px solid var(--border);color:var(--accent-hover);margin-bottom:4px}
  .start-icon svg{width:30px;height:30px}
  .start-title{margin:0;font-size:1.3rem;font-weight:600;color:var(--ink-1)}
  .start-gate p{color:var(--ink-2);font-size:.94rem;margin:0;max-width:44ch}
  .btn-start{font-family:var(--font-display);font-size:1.02rem;font-weight:600;padding:14px 44px;border-radius:var(--radius-sm);
    margin-top:12px;background:var(--accent);
    color:var(--accent-ink);border:none;cursor:pointer;transition:background var(--dur-1) var(--ease)}
  .btn-start:hover{background:var(--accent-hover)}

  /* ---- login gate ---- */
  body.auth-locked{overflow:hidden}
  .login-gate{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
    padding:24px;background:var(--surface-0)}
  .login-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);
    width:100%;max-width:380px;padding:34px 30px;text-align:center}
  .login-logo{width:44px;height:44px;margin:0 auto 14px;display:flex;
    align-items:center;justify-content:center}
  .login-logo img{width:44px;height:44px;border-radius:12px;display:block}
  .login-card h2{margin:0 0 4px;font-size:1.25rem;font-weight:600;color:var(--ink-1)}
  .login-sub{margin:0 0 22px;color:var(--ink-2);font-size:.92rem}
  .login-field{display:block;text-align:left;margin-bottom:14px}
  .login-field span{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);
    margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
  .login-field input{width:100%;box-sizing:border-box;padding:11px 13px;border-radius:var(--radius-sm);
    border:1px solid var(--border);background:var(--bg-1);color:var(--ink-1);font:inherit;font-size:.95rem}
  .login-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(25,103,255,.18)}
  .login-err{margin:0 0 14px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--red-dim);
    border:1px solid rgba(251,113,133,.4);color:var(--red);font-size:.86rem;text-align:left}
  .login-err[hidden]{display:none}
  .btn-login{width:100%;font-family:var(--font-display);font-size:1rem;font-weight:600;padding:13px;border-radius:var(--radius-sm);
    background:var(--accent);color:var(--accent-ink);border:none;
    cursor:pointer;transition:background var(--dur-1) var(--ease)}
  .btn-login:hover{background:var(--accent-hover)}
  .btn-login:disabled{opacity:.6;cursor:default}
  /* ---- account chip (top-right) ---- */
  .account{position:relative;margin-left:4px;flex-shrink:0}
  .account[hidden]{display:none}
  .account-btn{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--border);
    color:var(--ink-1);font:inherit;font-size:.85rem;padding:5px 10px 5px 6px;border-radius:999px;
    cursor:pointer;transition:border-color var(--dur-1) var(--ease)}
  .account-btn:hover{border-color:#33405c}
  .account-avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-size:.75rem;font-weight:700;color:var(--accent-ink);
    background:var(--accent)}
  .account-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .account-caret{width:14px;height:14px;color:var(--ink-2);flex:none}
  .account-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;z-index:1001;
    background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);
    box-shadow:var(--shadow);padding:12px 14px;text-align:left}
  .account-menu[hidden]{display:none}
  .account-row{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
  .account-row span{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
    color:var(--ink-3)}
  .account-row strong{font-size:.88rem;font-weight:600;color:var(--ink-1);word-break:break-all}
  .account-note{margin:0 0 12px;font-size:.75rem;color:var(--ink-2)}
  .btn-logout{width:100%;background:none;border:1px solid var(--border);color:var(--ink-2);
    font:inherit;font-size:.8rem;padding:7px 12px;border-radius:var(--radius-sm);cursor:pointer;
    transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
  .btn-logout:hover{color:var(--red);border-color:rgba(251,113,133,.4)}
  .btn-edit-profile{width:100%;background:none;border:1px solid var(--border);color:var(--ink-2);
    font:inherit;font-size:.8rem;padding:7px 12px;border-radius:var(--radius-sm);cursor:pointer;
    transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);margin-bottom:8px;text-align:center}
  .btn-edit-profile:hover{color:var(--accent-hover);border-color:rgba(25,103,255,.5)}
  .account-divider{height:1px;background:var(--border-soft);margin:10px 0}
  /* ---- activity log in account menu ---- */
  .account-menu{min-width:270px}