*{margin:0;padding:0;box-sizing:border-box}:root{--color-bg:#ffffff;--color-surface:#f8f9fa;--color-text:#1a1a1a;--color-text-secondary:#666666;--color-text-muted:#999999;--color-accent:#0066cc;--color-accent-hover:#0052a3;--color-border:#e0e0e0;--color-inactive:#cccccc;--color-error:#cc0000;--color-success:#00aa00;--shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 2px 4px rgba(0,0,0,0.08)}[data-theme=dark]{--color-bg:#1a1a1a;--color-surface:#2d2d2d;--color-text:#f0f0f0;--color-text-secondary:#b0b0b0;--color-text-muted:#808080;--color-accent:#4da3ff;--color-accent-hover:#6eb3ff;--color-border:#404040;--color-inactive:#606060;--color-error:#ff6b6b;--color-success:#51cf66;--shadow-sm:0 1px 2px rgba(0,0,0,0.3);--shadow-md:0 2px 4px rgba(0,0,0,0.4)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100vh;line-height:1.5}.auth-container{width:100%;max-width:400px;margin:0 auto}.auth-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:32px;box-shadow:var(--shadow-md)}.auth-card h1{font-size:24px;font-weight:600;color:var(--color-text);margin-bottom:8px;text-align:center}.auth-card h2{font-size:18px;font-weight:500;color:var(--color-text-secondary);margin-bottom:24px;text-align:center}.form-group{margin-bottom:20px}.form-group label{display:block;font-weight:500;margin-bottom:6px}.form-group input,.form-group label{font-size:14px;color:var(--color-text)}.form-group input{width:100%;padding:10px 12px;border:1px solid var(--color-border);border-radius:4px;background:var(--color-bg);transition:border-color .2s ease}.form-group input:focus{outline:none;border-color:var(--color-accent)}.form-group input[readonly]{background:var(--color-surface);cursor:not-allowed}.form-group small{display:block;font-size:12px;color:var(--color-text-muted);margin-top:4px}.form-actions{margin-top:24px;margin-bottom:16px}.btn{width:100%;padding:12px;font-size:14px;font-weight:500;border:none;border-radius:4px;cursor:pointer;transition:background .2s ease}.btn-primary{background:var(--color-accent);color:white}.btn-primary:hover:not(:disabled){background:var(--color-accent-hover)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:var(--color-surface);color:var(--color-accent);border:1px solid var(--color-accent);margin-top:8px}.btn-secondary:hover:not(:disabled){background:rgba(0,102,204,.08)}.form-links{text-align:center;margin-top:16px}.form-links a{display:block;color:var(--color-accent);text-decoration:none;font-size:13px;margin-bottom:8px}.form-links a:hover{text-decoration:underline}.mfa-hint{font-size:13px;color:var(--color-text-secondary);margin-bottom:16px;text-align:center}.form-step-mfa .form-group input{text-align:center;letter-spacing:.25em;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.mfa-digit-inputs{display:flex;gap:8px;justify-content:center;margin-top:8px}.mfa-digit-input{width:44px;height:48px;text-align:center;font-size:20px;font-weight:600;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;border:1px solid var(--color-border);border-radius:6px;background:var(--color-bg);color:var(--color-text);transition:border-color .2s ease,box-shadow .2s ease}.mfa-digit-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px rgba(0,102,204,.2)}.mfa-digit-input:disabled{opacity:.6;cursor:not-allowed}.mfa-digit-input::placeholder{color:var(--color-text-muted)}@media (max-width:480px){.mfa-digit-input{width:40px;height:44px;font-size:18px}.mfa-digit-inputs{gap:6px}}.error-message{background:rgba(204,0,0,.1);color:var(--color-error)}.error-message,.success-message{margin-top:16px;padding:10px;border-radius:4px;font-size:13px;text-align:center}.success-message{background:rgba(0,170,0,.1);color:var(--color-success)}.container{max-width:1200px;margin:0 auto;padding:24px}header{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--color-border)}@media (max-width:768px){header{margin-bottom:24px;padding-bottom:16px}}@media (max-width:480px){header{margin-bottom:16px;padding-bottom:12px}}.header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:12px}.header-logo-link{flex-shrink:0}h1{font-size:24px;font-weight:600;color:var(--color-text);margin-bottom:16px}@media (max-width:768px){h1{font-size:20px;margin-bottom:12px}}@media (max-width:480px){h1{font-size:18px;margin-bottom:10px}}.app-logo{display:flex;align-items:center;gap:8px;white-space:nowrap}.app-logo__img{flex-shrink:0;display:block;height:2rem;width:auto}[data-theme=light] .app-logo__img{filter:invert(1)}.app-logo__text{font-size:inherit;font-weight:600;color:var(--color-text)}.app-logo--header{font-size:1.125rem}.app-logo--header .app-logo__text{margin-bottom:0}.app-logo--auth{font-size:24px;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}.app-logo--auth .app-logo__img{height:2.5rem}.app-logo--auth .app-logo__text{margin-bottom:0}.user-info{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--color-text-secondary)}.nav-link{color:var(--color-accent);text-decoration:none;font-size:14px;padding:6px 12px;border-radius:4px;transition:background .2s ease}.nav-link.active,.nav-link:hover{background:var(--color-surface)}.nav-link.active{font-weight:400;position:relative;border-bottom:2px solid var(--color-accent);padding-bottom:4px}.logout-btn{background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary);padding:0 12px;height:36px;font-size:13px;border-radius:4px;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center}.logout-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.controls{gap:16px;flex-wrap:wrap;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--color-border)}.controls,.toggle-container{display:flex;align-items:center}.toggle-container{gap:8px}.toggle-label{font-size:14px;color:var(--color-text-secondary)}.toggle-switch{position:relative;width:44px;height:24px;background:var(--color-border);border-radius:12px;cursor:pointer;transition:background .2s ease}.toggle-switch.active{background:var(--color-accent)}.toggle-switch:after{content:"";position:absolute;width:18px;height:18px;background:white;border-radius:50%;top:3px;left:3px;transition:transform .2s ease;box-shadow:var(--shadow-sm)}.toggle-switch.active:after{transform:translateX(20px)}.refresh-btn{background:var(--color-accent);color:white;border:none;padding:8px 16px;font-size:14px;font-weight:500;border-radius:4px;cursor:pointer;transition:background .2s ease}.refresh-btn:hover:not(:disabled){background:var(--color-accent-hover)}.refresh-btn:disabled{opacity:.5;cursor:not-allowed}.last-refresh{font-size:12px;color:var(--color-text-muted);margin-left:auto}.brands-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:20px;gap:20px}.config-grid{grid-template-columns:repeat(3,1fr);grid-gap:20px;gap:20px}.brand-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:24px;transition:border-color .2s ease}.brand-card:hover{border-color:var(--color-accent)}.brand-card.inactive{opacity:.5;cursor:default}.brand-card.inactive:hover{border-color:var(--color-border)}.brand-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.brand-name{font-size:16px;font-weight:600;color:var(--color-text)}.brand-status{font-size:11px;padding:4px 8px;border-radius:3px;text-transform:uppercase;letter-spacing:.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px}.brand-status.active{background:#dcfce7;color:#166534}[data-theme=dark] .brand-status.active{background:rgba(34,197,94,.2);color:#86efac}.brand-status .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 6px rgba(16,185,129,.6);animation:pulse-green 2s ease-in-out infinite;flex-shrink:0}.brand-status.inactive{background:var(--color-surface);color:var(--color-text-muted)}.brand-count{font-size:36px;font-weight:600;color:var(--color-text);margin-bottom:8px;line-height:1}.brand-count.inactive{color:var(--color-text-muted)}.brand-label{font-size:12px;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.brand-timestamp{font-size:11px;color:var(--color-text-muted)}.brand-error{font-size:13px;color:var(--color-error);margin-top:8px}.config-indicator{position:absolute;top:12px;right:12px;width:12px;height:12px;box-shadow:0 0 8px rgba(16,185,129,.6);z-index:1}.config-indicator,.config-status-dot{border-radius:50%;background:#10b981;animation:pulse-green 2s ease-in-out infinite}.config-status-dot{display:inline-block;width:10px;height:10px;box-shadow:0 0 6px rgba(16,185,129,.6);flex-shrink:0}@keyframes pulse-green{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2);box-shadow:0 0 12px rgba(16,185,129,.8)}}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--color-border);background:var(--color-surface);border-radius:6px;cursor:pointer;color:var(--color-text-secondary);transition:color .2s,background .2s,border-color .2s}.theme-toggle:hover{color:var(--color-accent);border-color:var(--color-accent)}.theme-toggle svg{width:18px;height:18px}.theme-toggle .icon-dark{display:none}.theme-toggle .icon-light,[data-theme=dark] .theme-toggle .icon-dark{display:block}[data-theme=dark] .theme-toggle .icon-light{display:none}@media (max-width:768px){.container{padding:16px}.header-top{flex-direction:column;align-items:flex-start}.header-top>nav{display:flex;flex-wrap:wrap;gap:8px;width:100%}.nav-link{font-size:13px;padding:6px 10px}.user-info{flex-wrap:wrap;width:100%;margin-top:8px}.user-info span{width:100%;margin-bottom:8px}.brands-grid{grid-template-columns:1fr;gap:16px}.brand-card{padding:16px}.brand-count{font-size:28px}.config-grid{grid-template-columns:1fr}.controls{flex-direction:column;align-items:flex-start;gap:12px}.last-refresh{margin-left:0;font-size:11px}.page-wrap{padding:16px}.page-wrap--with-toc{grid-template-columns:1fr;gap:16px}.integration-toc-wrap{position:static;order:-1}.integration-toc{max-height:none;padding:12px}.section{padding:16px;margin-bottom:16px}.section h2{font-size:18px}.section h3{font-size:15px;margin-top:16px}.code-block{padding:12px 40px 12px 12px;font-size:12px;margin:12px 0;-webkit-overflow-scrolling:touch}.code-block,.code-block pre{overflow-x:auto}.copy-btn{top:6px;right:6px;padding:5px 10px;font-size:11px;position:-webkit-sticky;position:sticky;float:right;margin-left:8px}.brand-list{grid-template-columns:1fr;gap:8px}.example-box{padding:12px;margin:12px 0}}@media (max-width:480px){.container{padding:12px}.auth-card{padding:20px}.header-top>nav{flex-direction:column;align-items:stretch;width:100%}.nav-link{text-align:center;width:100%;display:block}.user-info{flex-direction:column;align-items:stretch}.logout-btn{width:100%;justify-content:center}.page-wrap,.section{padding:12px}.section h2{font-size:16px}.section h3{font-size:14px}.code-block{padding:10px 36px 10px 10px;font-size:11px;-webkit-overflow-scrolling:touch}.code-block,.code-block pre{overflow-x:auto}.copy-btn{top:4px;right:4px;padding:4px 8px;font-size:10px;position:-webkit-sticky;position:sticky;float:right;margin-left:8px}.brand-item{padding:10px;font-size:12px}.brand-item code{font-size:11px;word-break:break-all;overflow-wrap:break-word}.brand-card{padding:12px}.brand-count{font-size:24px}.brand-item .code-row{flex-direction:column;align-items:stretch}.brand-item .code-row code{width:100%}.example-box{padding:10px}}.settings-container{max-width:1200px;margin:0 auto;padding:24px}.auth-container.settings-container{max-width:1200px}.settings-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:24px;margin-bottom:16px;box-shadow:var(--shadow-md)}.settings-card h2{font-size:18px;margin-bottom:16px;color:var(--color-text);text-align:left}.mfa-status{font-size:14px;color:var(--color-text-secondary);margin-bottom:16px}.mfa-status.enabled{color:var(--color-success)}.mfa-qr{text-align:center;margin:16px 0}.mfa-qr img{max-width:200px;height:auto;border-radius:4px}.mfa-secret{font-family:monospace;font-size:13px;word-break:break-all;padding:8px;background:var(--color-bg);border-radius:4px;margin:8px 0}.back-link{display:inline-block;margin-bottom:16px;color:var(--color-accent);text-decoration:none;font-size:14px}.back-link:hover{text-decoration:underline}.page-wrap{max-width:1200px;margin:0 auto;width:100%;padding:24px}.page-wrap--with-toc{display:grid;grid-template-columns:220px 1fr;grid-gap:32px;gap:32px;align-items:start}.integration-toc-wrap{position:-webkit-sticky;position:sticky;top:24px}.integration-toc{background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:16px;max-height:min(80vh,400px);overflow-y:auto}.integration-toc-title{font-size:13px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.integration-toc-list{list-style:none;margin:0;padding:0}.integration-toc-list li{margin-bottom:4px}.integration-toc-link{display:block;font-size:14px;color:var(--color-text-secondary);text-decoration:none;padding:6px 10px;border-radius:4px;transition:background .15s,color .15s}.integration-toc-link:hover{background:var(--color-border);color:var(--color-accent)}.integration-content .section{scroll-margin-top:16px}.section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:24px;margin-bottom:24px}.section h2{font-size:20px;margin-bottom:16px}.section h2,.section h3{font-weight:600;color:var(--color-text)}.section h3{font-size:16px;margin-top:24px;margin-bottom:12px}.section p{color:var(--color-text-secondary);line-height:1.6;margin-bottom:12px}.section ol,.section ul{color:var(--color-text-secondary);line-height:1.8;margin-left:20px;margin-bottom:16px}.section code{background:var(--color-surface);padding:2px 6px;border-radius:3px;font-size:.9em;word-break:break-word}@media (max-width:768px){.section ol,.section ul{margin-left:16px}}.code-block{background:#1a1a1a;color:#f8f8f2;padding:16px 48px 16px 16px;border-radius:4px;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;line-height:1.5;margin:16px 0;position:relative;max-width:100%;overflow-x:auto;overflow-y:hidden}.code-block pre{margin:0;overflow-x:auto;min-height:1.5em;-webkit-overflow-scrolling:touch}.code-block code,.code-block pre{padding:0;white-space:pre;background:transparent}.code-block code{display:block;min-width:min-content;font-family:inherit;font-size:inherit;word-break:normal;overflow-wrap:normal;border-radius:0}.copy-btn{position:absolute;top:8px;right:8px;background:var(--color-accent);color:white;border:none;padding:6px 12px;font-size:12px;border-radius:4px;cursor:pointer;transition:background .2s ease}.copy-btn:hover{background:var(--color-accent-hover)}.copy-btn.copied{background:var(--color-success)}.example-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;padding:16px;margin:16px 0}.example-box .label{font-size:12px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.brand-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:12px;gap:12px;margin:16px 0}.brand-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;padding:12px;font-size:13px}[data-theme=dark] .brand-item{background:#252525}.brand-item strong{color:var(--color-text);display:block;margin-bottom:4px}.brand-item .code-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}.brand-item .code-row code{flex:1 1;min-width:0;overflow-wrap:break-word;word-break:break-all}.brand-item code{color:var(--color-accent);font-size:12px}.copy-mini-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--color-border);background:var(--color-surface);border-radius:4px;cursor:pointer;color:var(--color-text-secondary);transition:background .2s,color .2s,border-color .2s;flex-shrink:0}.copy-mini-btn:hover{background:var(--color-accent);color:white;border-color:var(--color-accent)}.copy-mini-btn.copied{background:var(--color-success);color:white;border-color:var(--color-success)}.copy-mini-btn svg{width:14px;height:14px}.inline-copy-wrap{display:inline-flex;align-items:center;gap:6px}[data-theme=dark] .code-block{background:#0d1117;color:#e6edf3}[data-theme=dark] .example-box{background:#252525;border-color:var(--color-border)}.auth-layout{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.settings-layout{min-height:100vh;padding-top:32px;padding-bottom:24px}.config-layout{display:flex;gap:24px;align-items:flex-start}.config-sidebar{min-width:220px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);padding:8px}.config-tab-button{width:100%}.config-tab-button:hover{border-color:var(--color-accent)!important}.config-tab-button:not([style*="var(--color-accent)"]):hover{color:var(--color-accent)}@media (max-width:1024px){.config-tab-button{width:auto}}.config-content{flex:1 1}.config-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:24px;gap:24px;margin-bottom:32px}@media (max-width:1024px){.config-layout{flex-direction:column}.config-sidebar{width:100%;min-width:unset;display:flex;flex-wrap:wrap;gap:8px;padding:12px}.config-sidebar button{width:auto;flex:0 0 auto;margin-bottom:0!important;white-space:nowrap}.config-grid{grid-template-columns:1fr}}