*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f5f6f8;color:#1e1e1e;line-height:1.5}

.topbar{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:52px}
.topbar h1{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.topbar .conn{font-size:11px;display:flex;align-items:center;gap:6px}
.topbar .conn-dot{width:7px;height:7px;border-radius:50%}
.topbar .conn-dot.on{background:#52c41a}
.topbar .conn-dot.off{background:#ff4d4f}
.btn-sm{padding:5px 12px;border-radius:4px;font-size:12px;cursor:pointer;border:1px solid #d9d9d9;background:#fff;white-space:nowrap}
.btn-sm.primary{background:#1677ff;color:#fff;border-color:#1677ff}
.btn-sm:hover{opacity:.85}
.btn-sm:disabled{opacity:.5;cursor:not-allowed}

.main{max-width:1100px;margin:0 auto;padding:16px 20px}
.dash{display:flex;gap:12px;margin-bottom:14px}
.dash-card{flex:1;background:#fff;border-radius:8px;padding:14px 18px;border:1px solid #e8e8e8;cursor:pointer;transition:all .15s;min-width:0}
.dash-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.08);transform:translateY(-1px)}
.dash-card .dc-num{font-size:28px;font-weight:700;margin-bottom:2px}
.dash-card .dc-label{font-size:12px;color:#888}
.dash-card.red .dc-num{color:#cf1322}
.dash-card.orange .dc-num{color:#d48806}
.dash-card.blue .dc-num{color:#1677ff}
.dash-card.green .dc-num{color:#389e0d}

.email-list{background:#fff;border-radius:8px;border:1px solid #e8e8e8;overflow:hidden}
.list-header{padding:10px 14px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.list-header .title{font-size:13px;font-weight:600;white-space:nowrap}
.search-box{padding:4px 10px;border:1px solid #e8e8e8;border-radius:4px;font-size:12px;width:160px;outline:none}
.search-box:focus{border-color:#1677ff}
.filter-btn{padding:3px 10px;border-radius:4px;border:1px solid #e8e8e8;background:#fff;font-size:11px;cursor:pointer}
.filter-btn:hover{border-color:#1677ff;color:#1677ff}
.filter-btn.active{background:#1677ff;color:#fff;border-color:#1677ff}

.email-item{display:flex;align-items:center;padding:10px 14px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background .12s;gap:10px}
.email-item:hover{background:#fafafa}
.email-item.selected{background:#e6f4ff}
.email-item .st{width:20px;height:20px;border-radius:50%;flex-shrink:0;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.st-new{background:#1677ff}
.st-red{background:#ff4d4f}
.st-yellow{background:#faad14}
.st-green{background:#52c41a}
.st-gray{background:#d9d9d9;color:#999}
.email-item .from{font-weight:500;font-size:13px;width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}
.email-item .subj{flex:1;font-size:12px;color:#555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.email-item .meta{font-size:11px;color:#bbb;white-space:nowrap;display:flex;align-items:center;gap:6px}
.replied-badge{font-size:10px;color:#52c41a}

.detail-panel{background:#fff;border-radius:8px;border:1px solid #e8e8e8;margin-top:14px;display:none}
.detail-panel.show{display:block}
.detail-top{padding:12px 14px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between}
.detail-top .dt-title{font-size:13px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-body{padding:14px;display:flex;gap:14px}
.detail-body .col{flex:1;min-width:0}

.email-preview{background:#fafafa;border-radius:6px;padding:12px;font-size:12px;max-height:300px;overflow-y:auto;white-space:pre-wrap;line-height:1.6;color:#555;margin-bottom:10px}
.btn-analyze-email{display:block;width:100%;padding:10px;background:#1677ff;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer}
.btn-analyze-email:hover{background:#096dd9}
.btn-analyze-email:disabled{background:#d9d9d9}

.tag{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:500;margin-right:4px}
.t-red{background:#fff1f0;color:#cf1322}
.t-orange{background:#fff7e6;color:#d46b08}
.t-blue{background:#e6f7ff;color:#096dd9}
.t-green{background:#f6ffed;color:#389e0d}
.t-gray{background:#f5f5f5;color:#666}

.info-card{background:#fafafa;border-radius:6px;padding:10px 12px;margin-bottom:8px;font-size:12px}
.info-card .row{display:flex;margin-bottom:3px}
.info-card .lbl{color:#999;min-width:60px}
.strategy-box{background:#f0f5ff;border-radius:6px;padding:10px 12px;margin-bottom:8px;font-size:12px;border-left:3px solid #1677ff}
.risk-box{background:#fff1f0;border-radius:6px;padding:8px 12px;margin-bottom:6px;font-size:12px;border-left:3px solid #ff4d4f}
.step-list{list-style:none;font-size:12px}
.step-list li{padding:3px 0 3px 18px;position:relative;color:#555}
.step-list li::before{content:"→";position:absolute;left:2px;color:#1677ff}

.reply-box{border:1px solid #e8e8e8;border-radius:6px;padding:12px}
.reply-subject{font-size:12px;color:#888;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #f0f0f0}
.reply-body{width:100%;min-height:180px;border:none;font-family:Georgia,serif;font-size:13px;line-height:1.7;resize:vertical;outline:none}
.reply-actions{margin-top:8px;display:flex;gap:8px}

.paste-area{background:#fff;border-radius:8px;border:1px solid #e8e8e8;padding:16px;margin-top:14px}
.paste-area h3{font-size:13px;margin-bottom:8px;color:#666}
.paste-area textarea{width:100%;min-height:100px;border:1px dashed #d9d9d9;border-radius:6px;padding:10px;font-family:monospace;font-size:12px;resize:vertical}
.paste-area textarea:focus{outline:none;border-color:#1677ff}

.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:100;display:none;align-items:center;justify-content:center}
.modal.show{display:flex}
.modal-box{background:#fff;border-radius:10px;padding:24px;width:420px;max-height:80vh;overflow-y:auto}
.modal-box h3{margin-bottom:16px;font-size:15px}
.modal-box label{display:block;font-size:12px;color:#666;margin-bottom:3px;margin-top:10px}
.modal-box input{width:100%;padding:7px 10px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px}
.modal-box input:focus{outline:none;border-color:#1677ff}
.hint{font-size:11px;color:#bbb;margin-top:2px}
.presets{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0}
.preset{padding:2px 8px;background:#f0f5ff;border-radius:3px;font-size:11px;color:#1677ff;cursor:pointer;border:none}
.preset:hover{background:#d6e4ff}

.empty{text-align:center;padding:48px 20px;color:#bbb}
.empty .icon{font-size:36px;margin-bottom:8px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.loading{animation:pulse 1.5s ease-in-out infinite;color:#999;text-align:center;padding:30px;font-size:13px}

/* ── v0.3.0: Login ───────────────────────────────── */
.login-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(160deg,#0b1a3b 0%,#132347 30%,#1a3357 60%,#0d1f3c 100%);z-index:200;display:flex;align-items:center;justify-content:center}
.login-overlay::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 20% 50%,rgba(22,119,255,.12) 0%,transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(9,88,217,.08) 0%,transparent 50%);pointer-events:none}
.login-box{position:relative;background:#fff;border-radius:16px;padding:40px 36px 32px;width:460px;max-width:92vw;box-shadow:0 20px 60px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.15);transition:all .3s}
.login-box h2{font-size:22px;margin-bottom:2px;text-align:center;font-weight:700;color:#1e1e1e;letter-spacing:-.3px}
.login-box .sub{font-size:12px;color:#888;text-align:center;margin-bottom:6px}
.login-box .sub a{color:#1677ff;text-decoration:none}
.login-box .sub a:hover{text-decoration:underline}
.login-box input{width:100%;padding:11px 14px;border:1.5px solid #e0e0e0;border-radius:8px;font-size:14px;display:block;transition:border-color .2s,box-shadow .2s}
.login-box input:focus{outline:none;border-color:#1677ff;box-shadow:0 0 0 3px rgba(22,119,255,.12)}
.btn-login{display:block;width:100%;padding:12px;background:linear-gradient(135deg,#1677ff,#0958d9);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;margin-top:14px;transition:all .2s;box-shadow:0 2px 8px rgba(22,119,255,.25)}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(22,119,255,.35)}
.btn-login:active{transform:translateY(0)}
.btn-outline{display:inline-block;padding:10px 24px;background:transparent;color:#1677ff;border:1.5px solid #1677ff;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;text-align:center}
.btn-outline:hover{background:rgba(22,119,255,.05)}
.login-box .err{color:#ff4d4f;font-size:12px;margin-top:8px;text-align:center;min-height:18px}
.login-box .mode-switch{margin-top:12px;display:flex;justify-content:center;gap:16px;font-size:12px}
.login-box .mode-switch a{color:#888;text-decoration:none}
.login-box .mode-switch a:hover{color:#1677ff}
.login-box .mode-switch a.danger{color:#ccc}
.login-box .mode-switch a.danger:hover{color:#ff4d4f}

/* Landing page */
.login-landing{text-align:center}
.login-landing .brand-icon{font-size:52px;display:block;margin-bottom:8px}
.login-landing .brand-name{font-size:28px;font-weight:800;color:#1677ff;letter-spacing:-1px;margin-bottom:4px}
.login-landing .brand-tagline{font-size:13px;color:#888;margin-bottom:24px}
.login-landing .features{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;margin-bottom:28px}
.login-landing .features .ft{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:#555;padding:8px 10px;border-radius:8px;background:#f8f9fb}
.login-landing .features .ft .emoji{font-size:18px;flex-shrink:0;line-height:1.2}
.login-landing .features .ft .txt{line-height:1.5}
.login-landing .features .ft .txt strong{display:block;font-size:13px;color:#333;margin-bottom:2px}
.login-landing .cta{display:flex;flex-direction:column;gap:10px;align-items:center}
.login-landing .cta .btn-login{margin-top:0;width:100%}

/* Auth forms */
.auth-form{display:none}
.auth-form.active{display:block}
.auth-form .back-link{text-align:center;margin-top:14px}
.auth-form .back-link a{color:#888;font-size:12px;text-decoration:none}
.auth-form .back-link a:hover{color:#1677ff}
.remember-me{display:flex;align-items:center;gap:6px;font-size:13px;color:#666;margin-top:8px;cursor:pointer;user-select:none}
.remember-me input[type=checkbox]{width:16px;height:16px;accent-color:#1677ff;cursor:pointer}

/* Onboarding steps */
.onboard-steps{text-align:left}
.ob-step{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:8px;border-radius:8px;background:#f8f9fb;transition:all .3s}
.ob-step.done{background:#f6ffed}
.ob-num{width:28px;height:28px;border-radius:50%;background:#e8e8e8;color:#999;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.ob-step.done .ob-num{background:#52c41a;color:#fff}
.ob-step .ob-desc{font-size:11px;color:#999;font-weight:400}
.ob-check{font-size:18px;flex-shrink:0}

/* Privacy notice on landing */
.privacy-notice{margin-top:20px;padding-top:16px;border-top:1px solid #f0f0f0;font-size:11px;color:#bbb;text-align:center;line-height:1.8}
.privacy-notice span{color:#999}

/* ── v0.3.0: Product table ───────────────────────── */
.product-table{width:100%;border-collapse:collapse;font-size:12px}
.product-table th{background:#fafafa;padding:8px 10px;text-align:left;border-bottom:2px solid #e8e8e8;font-weight:600;color:#666}
.product-table td{padding:7px 10px;border-bottom:1px solid #f5f5f5}
.product-table tr:hover td{background:#fafafa}
.product-table .actions{display:flex;gap:4px}
.product-table .actions button{padding:2px 8px;font-size:11px;border-radius:3px;border:1px solid #d9d9d9;background:#fff;cursor:pointer}
.product-table .actions button.del{color:#ff4d4f;border-color:#ffccc7}
.product-table .actions button:hover{opacity:.8}

/* ── v0.3.0: Settings ────────────────────────────── */
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f5f5f5}
.settings-row label{font-size:12px;color:#666}
.settings-row select,.settings-row input{padding:5px 10px;border:1px solid #d9d9d9;border-radius:4px;font-size:12px}

/* ── v0.3.0: Feedback buttons ────────────────────── */
.feedback-bar{display:flex;gap:6px;margin-top:8px;align-items:center;font-size:11px;color:#999}
.feedback-bar button{padding:3px 10px;border-radius:4px;border:1px solid #e8e8e8;background:#fff;cursor:pointer;font-size:13px}
.feedback-bar button:hover{background:#f5f5f5}
.feedback-bar button.liked{background:#f6ffed;border-color:#b7eb8f}

/* ── v0.4.2: Mobile responsive ──────────────────── */
@media (max-width:768px){
  .main{max-width:100%;padding:8px 10px}
  .dash{flex-wrap:wrap}
  .dash-card{flex:1 1 45%;min-width:140px;padding:10px 12px}
  .dash-card .dc-num{font-size:22px}
  .email-item .from{width:100px;font-size:12px}
  .email-item .subj{display:none}
  .email-item .meta{font-size:10px}
  .list-header{flex-direction:column;align-items:stretch}
  .search-box{width:100%}
  .detail-body{flex-direction:column}
  .detail-body .col{flex:none;width:100%}
  .modal-box{width:95vw;padding:16px;max-height:90vh;overflow-y:auto}
  .topbar{padding:0 10px;height:auto;flex-wrap:wrap;gap:4px}
  .topbar h1{font-size:13px}
  .topbar .btn-sm,.topbar select{font-size:10px;padding:3px 6px;margin-top:2px}
  .reply-actions{flex-wrap:wrap}
  .reply-actions .btn-sm{font-size:10px}
  #pasteInput{height:80px}
}
@media (max-width:480px){
  .dash-card{flex:1 1 100%}
  .email-item .from{width:70px;font-size:11px}
  .btn-sm{padding:4px 8px;font-size:10px}
  .login-box{padding:24px 16px;width:96vw}
  .login-landing .features{grid-template-columns:1fr}
  .login-landing .brand-name{font-size:22px}
  .login-landing .brand-icon{font-size:36px}
  .topbar h1 span{display:none}
  #styleSelect{display:none}
  .onboard-steps .ob-desc{display:none}
}


/* AI loading animation */
.loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:32px 16px;text-align:center;color:#1677ff;font-size:15px;font-weight:500}
.spinner{width:22px;height:22px;border:3px solid #e8e8e8;border-top-color:#1677ff;border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-dots::after{content:'';animation:dots 1.5s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}100%{content:''}}
.btn-analyze-email:disabled,.btn-login:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}