/* Militant Capture: shared brand layer. Tokens follow the Militant Media v3 site (dark warm neutrals, Manrope) with the Militant Mind gold. A page can switch to the orange Media accent with . */ :root{ --bg0:#080706; --bg1:#0e0d0b; --bg2:#141310; --bg3:#1a1916; --bg4:#201f1c; --bg5:#272522; --b0:rgba(255,255,255,.05); --b1:rgba(255,255,255,.09); --b2:rgba(255,255,255,.14); --b3:rgba(255,255,255,.22); --t1:#f0ece4; --t2:#ccc6bb; --t3:#a39e97; --t4:#8a857c; --ac:#d9bf8f; --ac2:#e3cb9c; --ac-ink:#1a150c; --ac-d:rgba(217,191,143,.12); --ac-g:rgba(217,191,143,.18); --ac-l:rgba(217,191,143,.32); --ac-hover:#e6d0a6; --ac-shadow:0 4px 28px rgba(217,191,143,.24); --glow:rgba(217,191,143,.15); --ok:#43cc8a; --ok-d:rgba(28,158,98,.16); --bad:#ff7a6b; --bad-d:rgba(230,80,60,.14); --rec:#ff5a4a; --sh2:0 4px 24px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.4); --sh4:0 24px 80px rgba(0,0,0,.75),0 4px 20px rgba(0,0,0,.5); --r1:6px; --r2:10px; --r3:14px; --r4:18px; --r5:24px; --f:"Manrope",system-ui,-apple-system,sans-serif; --grid:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); color-scheme:dark; } html[data-brand="media"]{ --ac:#d96218; --ac2:#e8834a; --ac-ink:#fff; --ac-d:rgba(217,98,24,.14); --ac-g:rgba(217,98,24,.20); --ac-l:rgba(217,98,24,.38); --ac-hover:#e0701f; --ac-shadow:0 4px 28px rgba(217,98,24,.32); --glow:rgba(217,98,24,.16); } html[data-brand="media"] .btn-ac{background:#bd520f} html[data-brand="media"] .btn-ac:hover{background:#a9480c} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;-webkit-text-size-adjust:100%} body{font-family:var(--f);background:var(--bg0);color:var(--t1);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh} img,video,svg{display:block;max-width:100%} a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--ac2);outline-offset:3px;border-radius:6px} [hidden]{display:none !important} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* The Mind backdrop: grid texture with the lighthouse glow from the top. */ .backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(ellipse 70% 48% at 50% -8%,var(--glow),transparent 70%),var(--grid),var(--bg0); background-size:auto,80px 80px,auto} .backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,7,6,.85))} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 22px; border:1px solid transparent;border-radius:100px;font-weight:700;font-size:15px;letter-spacing:-.1px;line-height:1; cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .18s,border-color .18s,transform .18s,box-shadow .18s,color .18s} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none !important} .btn svg{width:18px;height:18px;flex:none} .btn-ac{background:var(--ac);color:var(--ac-ink);box-shadow:var(--ac-shadow)} .btn-ac:hover:not(:disabled){background:var(--ac-hover);transform:translateY(-1px)} .btn-gl{background:rgba(255,255,255,.07);color:var(--t1);border-color:var(--b2)} .btn-gl:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:var(--b3)} .btn-ghost{background:transparent;color:var(--t2)} .btn-ghost:hover:not(:disabled){color:var(--t1);background:rgba(255,255,255,.06)} .btn-bad{background:transparent;color:var(--bad);border-color:rgba(255,122,107,.35)} .btn-bad:hover:not(:disabled){background:var(--bad-d)} .btn-lg{min-height:56px;padding:0 34px;font-size:17px} .btn-sm{min-height:36px;padding:0 14px;font-size:14px} .btn-icon{width:44px;padding:0} .btn-icon.btn-sm{width:36px} /* Form controls */ .field{display:grid;gap:7px} .field>span{font-size:14px;font-weight:700;color:var(--t2)} .input,.select{width:100%;min-height:44px;background:var(--bg2);border:1px solid var(--b2);border-radius:var(--r2);padding:0 14px;font-size:16px;color:var(--t1);transition:border-color .18s} .select{appearance:none;padding-right:38px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a39e97' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center} .input:hover,.select:hover{border-color:var(--b3)} .input:focus,.select:focus{outline:none;border-color:var(--ac)} textarea.input{padding:12px 14px;min-height:88px;resize:vertical;line-height:1.5} /* Segmented control */ .seg{display:flex;gap:4px;padding:4px;background:var(--bg2);border:1px solid var(--b1);border-radius:14px} .seg button{flex:1;min-height:40px;border:0;background:none;border-radius:10px;font-size:14.5px;font-weight:700;color:var(--t3);cursor:pointer; display:flex;align-items:center;justify-content:center;gap:7px;padding:0 10px;transition:background .18s,color .18s} .seg button svg{width:17px;height:17px;flex:none} .seg button:hover{color:var(--t1)} .seg button[aria-pressed="true"]{background:var(--bg5);color:var(--t1);box-shadow:inset 0 0 0 1px var(--ac-l)} /* Toggle switch */ .switch{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px;cursor:pointer} .switch span{font-size:15px;color:var(--t2)} .switch input{appearance:none;width:44px;height:26px;border-radius:26px;background:var(--bg5);border:1px solid var(--b2);position:relative;cursor:pointer;flex:none;transition:background .18s} .switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--t2);transition:transform .18s,background .18s} .switch input:checked{background:var(--ac-g);border-color:var(--ac-l)} .switch input:checked::after{transform:translateX(18px);background:var(--ac)} /* Toasts */ .toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1000;display:grid;gap:8px;width:max-content;max-width:calc(100vw - 32px)} .toast{background:var(--bg4);border:1px solid var(--b2);border-left:3px solid var(--ac);color:var(--t1);padding:12px 18px;border-radius:12px; box-shadow:var(--sh2);font-size:15px;font-weight:600;animation:toast-in .2s ease-out} .toast.bad{border-left-color:var(--bad)} @keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important} }