:root{--green:#2d7a61;--green-dark:#173f35;--green-soft:#e9f3ee;--ink:#203028;--muted:#718078;--line:#e0e8e3;--surface:#fff;--page:#f4f7f5;--amber:#a66b16;--amber-bg:#fff4df;--blue:#356aa5;--blue-bg:#eaf2fc;--purple:#7650a5;--purple-bg:#f1eafa;--red:#b94d43;--red-bg:#fff0ed;--shadow:0 8px 24px rgba(24,52,40,.08)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--page);font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.hidden,[hidden]{display:none!important}
.login-view{min-height:100vh;display:grid;place-items:center;background:#f4f8f5;padding:20px}.login-panel{width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:10px;padding:32px;box-shadow:var(--shadow)}.login-panel .brand{margin:0 0 38px;padding:0}.login-panel h1{margin:0 0 6px;color:var(--green-dark);font-size:28px}.login-form{display:grid;gap:14px;margin-top:26px}.login-form label{display:grid;gap:6px;font-size:12px;font-weight:600;color:#55635c}.login-form input{border:1px solid #dfe6e1;border-radius:6px;padding:11px;font:inherit}.login-error{min-height:18px;color:var(--red);font-size:12px;margin:0}
.app-shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}.sidebar{display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--line);padding:25px 16px 18px}.brand{display:flex;align-items:center;gap:9px;font-weight:750;font-size:18px;color:var(--green-dark);padding:0 10px}.brand-mark{display:grid;place-items:center;width:30px;height:30px;background:var(--green-dark);color:#fff;border-radius:7px;font-weight:800}.eyebrow{margin:0;color:var(--green);font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.sidebar>.eyebrow{margin:40px 10px 12px}.nav-list{display:grid;gap:4px}.nav-item{border:0;background:transparent;color:#65736c;text-align:left;padding:11px 12px;border-radius:6px;display:flex;align-items:center;gap:10px;font-weight:650}.nav-item:hover{background:#f2f7f4;color:var(--green-dark)}.nav-item.active{background:var(--green-soft);color:var(--green-dark)}.nav-icon{width:18px;text-align:center;font-size:16px}.sidebar-bottom{margin-top:auto}.storage{border-top:1px solid var(--line);padding:18px 10px 16px}.storage-head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.storage-head strong{color:var(--green)}.progress{height:5px;background:#edf2ee;border-radius:4px;margin:10px 0 7px;overflow:hidden}.progress i{display:block;width:64%;height:100%;background:var(--green);border-radius:4px}.storage small{font-size:11px;color:var(--muted)}.profile{border-top:1px solid var(--line);padding:15px 10px 0;display:grid;grid-template-columns:32px 1fr 25px;gap:9px;align-items:center}.avatar{width:32px;height:32px;border-radius:50%;background:#f0d8bc;color:#754829;display:grid;place-items:center;font-weight:700}.profile strong,.profile small{display:block}.profile strong{font-size:12px}.profile small{font-size:11px;color:var(--muted);margin-top:2px}.icon-btn{border:0;background:transparent;color:var(--muted);font-size:16px;padding:3px}
.main-content{min-width:0}.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px}.topbar-actions{display:flex;align-items:center;gap:18px}.mobile-brand{display:none}.connection{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}.connection i{display:block;width:7px;height:7px;border-radius:50%;background:#4aa375}.current-user{font-size:12px;color:var(--muted)}.page-wrap{max-width:1420px;margin:0 auto;padding:34px}.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:28px}.page-header h1{margin:5px 0 7px;font-size:29px;letter-spacing:0;color:var(--green-dark)}.subhead{color:var(--muted);margin:0;font-size:13px}.primary-btn,.secondary-btn,.filter-btn,.text-btn{border-radius:6px;padding:10px 15px;border:1px solid transparent;font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:6px}.primary-btn{background:var(--green);color:#fff}.primary-btn:hover{background:#246951}.secondary-btn,.filter-btn{background:#fff;color:var(--green-dark);border-color:var(--line)}.secondary-btn:hover,.filter-btn:hover{background:#f4f8f5}.text-btn{background:transparent;color:var(--green);padding:5px 0}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}.stat-card,.workspace-panel,.notice-panel{background:var(--surface);border:1px solid var(--line);border-radius:8px}.stat-card{padding:18px}.stat-label{color:var(--muted);font-size:12px;display:flex;justify-content:space-between;align-items:center}.stat-card>strong{display:block;font-size:25px;margin:15px 0 5px;color:var(--green-dark)}.stat-card>small{color:var(--muted);font-size:11px}.stat-card em{font-size:12px;font-style:normal;color:var(--muted);font-weight:500}.stat-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-weight:800}.stat-icon.green{background:var(--green-soft);color:var(--green)}.stat-icon.amber{background:var(--amber-bg);color:var(--amber)}.stat-icon.blue{background:var(--blue-bg);color:var(--blue)}.stat-icon.purple{background:var(--purple-bg);color:var(--purple)}
.workspace-panel{overflow:hidden}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}.toolbar-title{display:flex;align-items:center;gap:10px}.toolbar h2,.notice-panel h2{font-size:15px;margin:0;color:var(--green-dark)}.record-count{font-size:11px;color:var(--muted);background:#f0f4f1;border-radius:12px;padding:4px 8px}.toolbar-controls{display:flex;align-items:center;gap:8px}.search{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:6px;padding:0 9px;color:var(--muted);background:#fff}.search input{width:190px;border:0;outline:0;padding:9px 0;font-size:12px}.toolbar select,.attachment-upload select{border:1px solid var(--line);border-radius:6px;background:#fff;padding:9px 10px;color:var(--ink);font-size:12px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:700px}th,td{text-align:left;padding:14px 20px;border-bottom:1px solid #edf1ee;font-size:12px;white-space:nowrap}th{color:var(--muted);font-weight:650;font-size:11px;background:#fbfcfb}tbody tr{cursor:pointer}tbody tr:hover{background:#f8fbf9}.status-group th{padding:10px 20px;background:#f5faf7;border-bottom:1px solid var(--line);color:var(--green-dark);font-size:11px;font-weight:800;letter-spacing:.02em}.status-group th small{margin-left:8px;color:var(--muted);font-weight:600}.status-group-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;background:var(--muted)}.status-group-dot.wait{background:var(--amber)}.status-group-dot.review{background:var(--blue)}.status-group-dot.done{background:var(--green)}.status-group-dot.reject{background:var(--red)}.row-title{font-weight:700;color:var(--green-dark);display:flex;flex-direction:column;gap:3px}.row-title small,td small{font-size:10px;color:var(--muted);font-weight:500}.amount{font-variant-numeric:tabular-nums;font-weight:700}.row-more{color:var(--muted);font-size:18px}.status{display:inline-flex;align-items:center;border-radius:12px;padding:5px 9px;font-size:11px;font-weight:700}.status.wait{background:var(--amber-bg);color:var(--amber)}.status.review{background:var(--blue-bg);color:var(--blue)}.status.done{background:var(--green-soft);color:var(--green)}.status.reject{background:var(--red-bg);color:var(--red)}.empty-state{padding:42px 20px;text-align:center;color:var(--muted)}.empty-mark{font-size:28px;color:#9bb4a7}.empty-state h3{color:var(--green-dark);font-size:14px;margin:8px 0}.empty-state p{font-size:12px;margin:0}
.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}.notice-panel{padding:20px}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start}.completion-row{display:flex;align-items:center;gap:18px;margin-top:22px}.donut{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:#edf1ee;position:relative}.donut:after{content:"";position:absolute;inset:10px;background:#fff;border-radius:50%}.donut span{position:relative;z-index:1;font-weight:800;color:var(--green-dark)}.completion-row strong{font-size:13px}.completion-row p{font-size:11px;color:var(--muted);margin:8px 0 0}.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}.quick-actions button{background:#f7faf8;border:1px solid var(--line);border-radius:6px;padding:13px 9px;text-align:left;color:var(--green-dark)}.quick-actions button:hover{border-color:#b6d3c3;background:var(--green-soft)}.quick-actions span{display:block;color:var(--green);font-size:20px;margin-bottom:8px}.quick-actions strong,.quick-actions small{display:block}.quick-actions strong{font-size:12px}.quick-actions small{font-size:10px;color:var(--muted);margin-top:4px}.archive-panel{padding:20px}.archive-intro{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line)}.archive-intro h2{margin:0 0 5px;font-size:15px}.archive-intro p{margin:0;color:var(--muted);font-size:12px}.archive-icon{display:grid;place-items:center;width:38px;height:38px;background:var(--blue-bg);color:var(--blue);border-radius:7px;font-size:20px}.archive-row{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-bottom:1px solid #edf1ee;cursor:pointer}.archive-row:hover{background:#f8fbf9}.archive-row strong,.archive-row small{display:block}.archive-row strong{font-size:12px}.archive-row small{font-size:10px;color:var(--muted);margin-top:4px}.archive-files{font-size:11px;color:var(--muted)}.settings-panel{padding:4px 20px}.setting-row{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid #edf1ee}.setting-row:last-child{border-bottom:0}.setting-row h3{font-size:13px;margin:0 0 5px;color:var(--green-dark)}.setting-row p{font-size:11px;color:var(--muted);margin:0}.setting-row code{background:#f2f6f3;border-radius:4px;padding:6px 8px;color:var(--green-dark);font-size:11px}
.modal-backdrop{position:fixed;inset:0;background:rgba(20,39,31,.35);display:grid;place-items:center;padding:20px;z-index:10}.modal{background:#fff;width:min(700px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:8px;box-shadow:0 18px 50px rgba(20,40,30,.2);padding:24px}.modal-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}.modal-head h2{margin:5px 0 0;color:var(--green-dark);font-size:20px}.close-btn{border:0;background:transparent;color:var(--muted);font-size:24px;line-height:1;padding:0 4px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label{display:grid;gap:7px;color:#55635c;font-size:11px;font-weight:700}.form-grid label.full{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:10px;background:#fff;color:var(--ink);outline:0}.form-grid textarea{resize:vertical}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:#8dbca5;box-shadow:0 0 0 3px #eaf5ee}.file-drop{border:1px dashed #b9cec0;background:#f8fbf9;border-radius:6px;padding:12px}.file-drop input{border:0;padding:0;background:transparent}.file-drop small{font-size:10px;color:var(--muted);font-weight:500}.form-actions,.detail-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.detail-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.detail-item{background:#f7faf8;border-radius:6px;padding:12px}.detail-item label,.detail-item strong{display:block}.detail-item label{font-size:10px;color:var(--muted);margin-bottom:6px}.detail-item strong{font-size:12px;color:var(--green-dark)}.detail-description{margin-top:18px;border-top:1px solid var(--line);padding-top:15px}.detail-description strong{font-size:12px}.detail-description p{font-size:12px;line-height:1.6;color:var(--muted);margin:7px 0 0}.attachments{margin-top:18px}.attachments h3,.audit-area h3{font-size:12px;color:var(--green-dark);margin:0 0 8px}.attachment{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #edf1ee;font-size:11px}.attachment a{color:var(--blue)}.attachment small,.attachment span:last-child{color:var(--muted)}.attachment-upload{display:flex;gap:8px;align-items:center;margin-top:14px;padding:10px;background:#f7faf8;border-radius:6px}.attachment-upload input{min-width:0;flex:1;font-size:11px}.attachment-upload select{font-size:11px}.approve{background:var(--green);color:#fff;border:0;border-radius:5px;padding:9px 12px;font-size:11px;font-weight:700}.reject,.danger-action{background:var(--red-bg)!important;color:var(--red)!important;border:1px solid #f3d3ce!important;border-radius:5px;padding:9px 12px;font-size:11px;font-weight:700}.audit-area{border-top:1px solid var(--line);margin-top:20px;padding-top:15px}.audit-row{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:7px 0;border-bottom:1px solid #edf0ee;font-size:11px}.audit-row span,.audit-row small{color:var(--muted)}.audit-row small{grid-column:1/-1}.toast{position:fixed;right:24px;bottom:24px;background:var(--green-dark);color:#fff;padding:11px 15px;border-radius:6px;font-size:12px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s;z-index:30}.toast.show{opacity:1;transform:translateY(0)}
.advanced-filters{display:grid;grid-template-columns:repeat(5,minmax(105px,1fr)) auto;gap:10px;align-items:end;padding:14px 18px;border-top:1px solid var(--line);background:#f8faf9}.advanced-filters label{display:grid;gap:5px;color:var(--muted);font-size:10px;font-weight:700}.advanced-filters input,.advanced-filters select{min-width:0;border:1px solid var(--line);border-radius:6px;background:#fff;padding:8px;color:var(--ink)}.pagination{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.pagination button{width:34px;height:32px;padding:0}.pagination button:disabled{opacity:.4;cursor:not-allowed}.batch-toolbar{display:flex;align-items:center;gap:10px;padding:10px 18px;border-top:1px solid var(--line);background:var(--green-soft)}.batch-toolbar strong{margin-right:auto;font-size:11px}.batch-toolbar select{border:1px solid var(--line);border-radius:6px;background:#fff;padding:9px}.select-cell{width:36px;text-align:center}.select-cell input{width:15px;height:15px}.attachment>span{display:flex;align-items:center;gap:6px}.attachment .icon-btn{width:26px;height:26px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--green);font-size:14px}.attachment .danger-icon{color:var(--red)}.management-section{border-top:1px solid var(--line);padding:20px}.management-section h2{margin:4px 0 0;font-size:16px}.backup-row strong,.backup-row small{display:block}.backup-row small{margin-top:3px;color:var(--muted);font-size:10px}.inline-form{display:flex;gap:8px}.inline-form input,.category-row input{min-width:0;border:1px solid var(--line);border-radius:6px;padding:9px;background:#fff}.category-row{display:grid;grid-template-columns:minmax(120px,1fr) 80px auto auto auto;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line)}.backup-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid var(--line)}.muted-row{color:var(--muted);font-size:11px}
@media(max-width:900px){.app-shell{grid-template-columns:190px}.page-wrap{padding:26px 20px}.topbar{padding:0 20px}.stats-grid{grid-template-columns:repeat(2,1fr)}.bottom-grid{grid-template-columns:1fr}.toolbar{align-items:flex-start;flex-direction:column}.toolbar-controls{width:100%;flex-wrap:wrap}.search{flex:1}.search input{width:100%}.advanced-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.category-row{grid-template-columns:1fr 70px auto}.category-row .status{display:none}.batch-toolbar{flex-wrap:wrap}}
@media(max-width:640px){.app-shell{display:block}.sidebar{display:none}.topbar{height:58px}.mobile-brand{display:flex;align-items:center;gap:8px;color:var(--green-dark)}.mobile-brand .brand-mark{width:26px;height:26px;font-size:13px}.topbar-actions{gap:8px}.connection{display:none}.current-user{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-wrap{padding:22px 14px}.page-header{margin-bottom:20px;display:block}.page-header .primary-btn{margin-top:15px}.page-header h1{font-size:24px}.stats-grid{gap:9px}.stat-card{padding:13px}.stat-card>strong{font-size:20px;margin:11px 0 4px}.stat-label{font-size:11px}.stat-card>small{font-size:10px}.toolbar{padding:14px}.toolbar-controls{display:grid;grid-template-columns:1fr 1fr}.search{grid-column:1/-1}.search input{width:100%}.advanced-filters{grid-template-columns:1fr}.bottom-grid{margin-top:16px}.quick-actions{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid label.full{grid-column:auto}.modal{padding:18px}.detail-list{grid-template-columns:1fr 1fr}.attachment-upload{flex-wrap:wrap}.attachment-upload input{flex-basis:100%}.logout-btn{padding:7px 8px;font-size:11px}.user-row{grid-template-columns:1fr auto}.user-row .status{display:none}}

/* Visual refresh: keep the existing workflow, improve hierarchy and feedback. */
:root {
  --green: #237b68;
  --green-dark: #153b35;
  --green-deep: #102f2c;
  --green-soft: #e5f3ed;
  --ink: #1d2b2a;
  --muted: #74827f;
  --line: #dfe8e5;
  --surface: #ffffff;
  --page: #f4f7f7;
  --amber: #a86b18;
  --amber-bg: #fff4df;
  --blue: #3d6fa6;
  --blue-bg: #edf3fb;
  --purple: #74549b;
  --purple-bg: #f2edfa;
  --red: #b34e46;
  --red-bg: #fff0ed;
  --shadow: 0 10px 30px rgba(24, 49, 43, .07);
  --shadow-strong: 0 20px 55px rgba(17, 43, 38, .18);
}
.user-row { display: grid; grid-template-columns: 110px 120px minmax(110px, 1fr) minmax(170px, 1fr) minmax(130px, 1fr) auto auto; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.user-row input, .user-row select { min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 9px; background: #fff; }
.user-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-enabled { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11px; color: var(--muted); }
.reminder-setting { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: #f8fbf9; }
.reminder-toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--green-dark); font-size: 12px; font-weight: 700; white-space: nowrap; }
.reminder-toggle input { width: 16px; height: 16px; accent-color: var(--green); }
.reminder-setting small, .reminder-state { color: var(--muted); font-size: 11px; }
.email-binding-backdrop { z-index: 40; }
.email-binding-modal { width: min(430px, 100%); }
.email-binding-copy { margin: -5px 0 20px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.email-binding-form { display: grid; gap: 12px; }
.email-binding-form label { display: grid; gap: 7px; color: #55635c; font-size: 11px; font-weight: 700; }
.email-binding-form input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 6px; padding: 10px; background: #fff; color: var(--ink); }
.email-binding-form input:focus { border-color: #8dbca5; box-shadow: 0 0 0 3px #eaf5ee; outline: 0; }
.email-binding-error { min-height: 18px; margin: 0; color: var(--red); font-size: 11px; }
.email-binding-form .primary-btn { width: 100%; }
.user-directory-row { display: grid; grid-template-columns: minmax(100px, 1fr) 100px minmax(90px, 1fr) minmax(160px, 2fr) 60px; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
@media (max-width: 900px) { .user-directory-row { grid-template-columns: 1fr 1fr; } .user-directory-row strong { grid-column: 1 / -1; } .user-row { grid-template-columns: 1fr 1fr; } .user-row strong { grid-column: 1 / -1; } .user-row button { justify-self: start; } }

html { scroll-behavior: smooth; }
body { background: var(--page); color: var(--ink); line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { outline: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 3px rgba(70, 164, 130, .22); }

.login-view { position: relative; isolation: isolate; overflow: hidden; padding: 28px; background: #e8efec; }
.login-view::before, .login-view::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgba(35, 123, 104, .14); border-radius: 50%; pointer-events: none; }
.login-view::before { width: 620px; height: 620px; top: -240px; left: -220px; box-shadow: 0 0 0 42px rgba(35, 123, 104, .035), 0 0 0 84px rgba(35, 123, 104, .025); }
.login-view::after { width: 460px; height: 460px; right: -180px; bottom: -220px; box-shadow: 0 0 0 32px rgba(35, 123, 104, .035), 0 0 0 64px rgba(35, 123, 104, .025); }
.login-panel { width: min(450px, 100%); padding: 38px; border: 1px solid rgba(214, 227, 221, .95); border-radius: 8px; box-shadow: var(--shadow-strong); }
.login-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 54px; }
.login-panel .brand { margin: 0; padding: 0; }
.login-panel .brand-mark { width: 36px; height: 36px; border-radius: 8px; background: var(--green-dark); box-shadow: 0 5px 12px rgba(21, 59, 53, .2); }
.secure-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--green); background: var(--green-soft); border: 1px solid #cae5d8; border-radius: 99px; padding: 6px 9px; font-size: 10px; font-weight: 750; }
.secure-badge i, .storage-head strong i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #4eb283; }
.login-panel h1 { font-size: 30px; letter-spacing: -.02em; line-height: 1.2; }
.login-panel .subhead { font-size: 13px; }
.login-form { gap: 16px; margin-top: 30px; }
.login-form label { gap: 7px; color: #50615b; font-size: 11px; letter-spacing: .01em; }
.login-form input { min-height: 44px; padding: 11px 12px; border-color: #d6e2dc; border-radius: 6px; background: #fbfdfc; transition: border-color .18s, box-shadow .18s, background .18s; }
.login-form input:hover { border-color: #b7cec3; }
.login-form input:focus { border-color: #5aaf8e; background: #fff; box-shadow: 0 0 0 3px rgba(79, 169, 133, .14); }
.login-form .primary-btn { min-height: 44px; margin-top: 4px; font-size: 13px; }

.app-shell { grid-template-columns: 252px minmax(0, 1fr); background: var(--page); }
.sidebar { background: var(--green-deep); border-right: 0; padding: 28px 16px 20px; color: #c3d6d0; }
.sidebar .brand { color: #f5fbf8; padding: 0 12px; letter-spacing: .01em; }
.sidebar .brand-mark { color: var(--green-deep); background: #d9f2e7; box-shadow: 0 7px 16px rgba(0, 0, 0, .12); }
.sidebar > .eyebrow { margin: 48px 12px 12px; color: #77bda5; }
.nav-list { gap: 5px; }
.nav-item { position: relative; min-height: 43px; color: #a9c1b9; border-radius: 7px; padding: 11px 13px; transition: background .18s, color .18s, transform .18s; }
.nav-item:hover { color: #f8fffb; background: rgba(224, 248, 238, .08); }
.nav-item.active { color: #f8fffb; background: rgba(125, 215, 177, .14); box-shadow: inset 3px 0 #7dd7b1; }
.nav-item.active::after { content: ""; position: absolute; right: 13px; width: 5px; height: 5px; border-radius: 50%; background: #82d9b3; }
.nav-icon { color: currentColor; opacity: .9; font-size: 15px; }
.sidebar-bottom { margin-top: auto; }
.storage { border-top-color: rgba(220, 241, 232, .13); padding: 18px 12px 17px; }
.storage-head { color: #a7beb7; }
.storage-head strong { display: inline-flex; align-items: center; gap: 6px; color: #8ed3b5; }
.progress { height: 5px; background: rgba(228, 247, 238, .12); }
.progress i { background: #7ad2ac; }
.storage small { color: #789a90; line-height: 1.5; display: block; }
.sidebar-profile { display: grid; grid-template-columns: 34px 1fr 8px; align-items: center; gap: 9px; padding: 15px 12px 2px; border-top: 1px solid rgba(220, 241, 232, .13); }
.sidebar-profile .avatar { width: 34px; height: 34px; background: #c7e6d8; color: var(--green-deep); font-size: 12px; }
.sidebar-profile strong, .sidebar-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-profile strong { color: #f2fbf7; font-size: 12px; }
.sidebar-profile small { margin-top: 2px; color: #7fa79a; font-size: 10px; }
.profile-dot { width: 7px; height: 7px; border-radius: 50%; background: #73d0a8; box-shadow: 0 0 0 3px rgba(115, 208, 168, .12); }

.main-content { min-width: 0; background: var(--page); }
.topbar { position: sticky; top: 0; z-index: 5; height: 72px; padding: 0 42px; border-bottom-color: #e2eae7; box-shadow: 0 2px 10px rgba(25, 54, 46, .025); }
.topbar-actions { gap: 20px; }
.connection { color: #75857f; font-size: 11px; }
.connection i { width: 7px; height: 7px; background: #4cb082; box-shadow: 0 0 0 3px #e7f5ee; }
.user-meta { display: inline-flex; align-items: center; gap: 9px; padding-left: 2px; }
.user-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); font-size: 11px; font-weight: 800; }
.user-copy { display: grid; gap: 1px; min-width: 0; }
.user-copy strong { max-width: 130px; overflow: hidden; color: var(--green-dark); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.user-copy small { color: var(--muted); font-size: 10px; }
.logout-btn { padding: 8px 11px; font-size: 11px; }
.password-shortcut { padding: 8px 11px; font-size: 11px; white-space: nowrap; }
.mobile-nav { display: none; }

.page-wrap { width: min(1480px, 100%); padding: 38px 42px 48px; }
.page-header { margin-bottom: 30px; }
.page-header h1 { margin: 6px 0 8px; font-size: 32px; line-height: 1.15; letter-spacing: -.025em; }
.page-header .subhead { font-size: 13px; }
.eyebrow { color: var(--green); letter-spacing: .11em; }
.primary-btn, .secondary-btn, .filter-btn, .text-btn { min-height: 38px; border-radius: 6px; transition: transform .16s, box-shadow .16s, background .16s, border-color .16s; }
.primary-btn { background: var(--green); box-shadow: 0 5px 12px rgba(35, 123, 104, .16); }
.primary-btn:hover { background: #1b6757; box-shadow: 0 7px 16px rgba(35, 123, 104, .2); transform: translateY(-1px); }
.primary-btn:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
.secondary-btn, .filter-btn { background: #fff; border-color: #dbe6e1; }
.secondary-btn:hover, .filter-btn:hover { border-color: #b9d3c7; background: #f7fbf9; transform: translateY(-1px); }
.filter-btn.is-active { color: var(--green-dark); border-color: #8dc3a9; background: var(--green-soft); box-shadow: 0 0 0 3px rgba(79, 169, 133, .1); }
.text-btn:hover { color: #175c4d; }

.stats-grid { gap: 16px; margin-bottom: 26px; }
.amount-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.amount-card { min-height: 112px; }
@media (max-width: 640px) { .amount-grid { grid-template-columns: 1fr; gap: 9px; } }
.stat-card, .workspace-panel, .notice-panel { border-color: #dee8e3; border-radius: 8px; box-shadow: 0 5px 18px rgba(25, 55, 47, .035); }
.stat-card { position: relative; min-height: 142px; padding: 19px 20px 17px; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; width: 88px; height: 88px; right: -34px; bottom: -48px; border: 16px solid rgba(35, 123, 104, .045); border-radius: 50%; }
.stat-card:nth-child(2)::after { border-color: rgba(168, 107, 24, .06); }
.stat-card:nth-child(3)::after { border-color: rgba(61, 111, 166, .06); }
.stat-card:nth-child(4)::after { border-color: rgba(116, 84, 155, .06); }
.stat-label { color: #71817b; font-size: 11px; font-weight: 650; }
.stat-card > strong { margin: 17px 0 5px; font-size: 27px; letter-spacing: -.025em; }
.stat-card > small { font-size: 11px; }
.stat-card > small b { color: var(--green); }
.stat-icon { width: 27px; height: 27px; font-size: 12px; }

.workspace-panel { width: 100%; overflow: hidden; }
.toolbar { min-height: 73px; padding: 17px 20px; }
.toolbar h2, .notice-panel h2 { font-size: 15px; letter-spacing: -.01em; }
.record-count { background: #f0f5f2; color: #687a73; border: 1px solid #e2ece6; }
.toolbar-controls { gap: 9px; }
.search { min-height: 38px; border-color: #dbe6e1; transition: border-color .18s, box-shadow .18s; }
.search:focus-within { border-color: #8dc3a9; box-shadow: 0 0 0 3px rgba(79, 169, 133, .11); }
.search input { width: 210px; padding: 9px 0; }
.toolbar select, .attachment-upload select { min-height: 38px; border-color: #dbe6e1; }
.table-wrap { scrollbar-color: #c9d9d1 transparent; }
table { min-width: 760px; }
thead th { position: sticky; top: 0; z-index: 1; background: #f8fbf9; }
th, td { padding: 15px 20px; }
th { color: #7a8983; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
tbody tr { transition: background .16s; }
tbody tr:hover { background: #f3f9f6; }
tbody tr:last-child td { border-bottom: 0; }
.row-title { gap: 4px; }
.row-title small, td small { color: #82918b; }
.amount { color: var(--green-dark); font-size: 13px; }
.row-more { width: 28px; color: #9aa9a3; font-size: 16px; text-align: center; }
.status { padding: 5px 9px; border: 1px solid transparent; font-size: 10px; letter-spacing: .01em; }
.status-select { cursor: pointer; min-height: 34px; padding-right: 20px; }
.status-select:disabled { opacity: .6; cursor: wait; }
.status-select option { background: #fff; color: var(--ink); }
.notes-cell { width: 220px; max-width: 220px; }
.account-cell { width: 130px; max-width: 130px; }
.account-cell .inline-input { min-width: 96px; }
.inline-input { width: 100%; min-width: 140px; min-height: 32px; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 6px 8px; color: var(--ink); font: inherit; font-size: 12px; text-overflow: ellipsis; }
.inline-input:hover { border-color: var(--line); background: #fff; }
.inline-input:focus { outline: 0; border-color: var(--green); background: #fff; }
.inline-input::placeholder { color: #a9b5b0; }
.inline-input:disabled { opacity: .6; cursor: wait; }
.row-inline-text { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.status.wait { border-color: #f4dfb7; }
.status.review { border-color: #d5e2f4; }
.status.done { border-color: #cbe6d8; }
.status.reject { border-color: #f0d0cb; }
.empty-state { padding: 56px 20px; }
.empty-mark { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; background: #eef5f1; font-size: 22px; }
.empty-state h3 { margin-top: 12px; }
.pagination { padding: 13px 16px; background: #fbfdfc; }
.pagination button { border-radius: 6px; }

.advanced-filters { gap: 12px; padding: 15px 20px; background: #f8fbf9; border-top-color: #e5ede9; }
.advanced-filters input, .advanced-filters select { min-height: 36px; border-color: #dbe6e1; }
.batch-toolbar { gap: 9px; padding: 11px 18px; background: #ecf8f1; border-top-color: #d5ecdf; }
.batch-toolbar select { min-height: 36px; border-color: #cfe2d7; }

.bottom-grid { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 26px; }
.notice-panel { padding: 21px; }
.bottom-grid > .notice-panel { width: 100%; min-width: 0; }
.completion-row { gap: 20px; margin-top: 24px; }
.donut { width: 96px; height: 96px; box-shadow: inset 0 0 0 1px #e5eee9; }
.donut:after { inset: 11px; }
.completion-row strong { font-size: 13px; }
.quick-actions { width: 100%; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 23px; }
.quick-actions button { min-width: 0; min-height: 122px; border-color: #e0ebe5; background: #f8fbf9; overflow-wrap: anywhere; transition: transform .16s, border-color .16s, background .16s, box-shadow .16s; }
.quick-actions button:hover { border-color: #a9cfbb; box-shadow: 0 5px 14px rgba(35, 123, 104, .08); transform: translateY(-2px); }
.quick-actions span { font-size: 19px; }
.quick-actions strong { font-size: 12px; }
.archive-panel { padding: 21px; }
.archive-intro { padding-bottom: 19px; }
.archive-icon { border-radius: 8px; }
.archive-row { min-height: 59px; padding: 14px 6px; transition: background .16s, padding .16s; }
.archive-row:hover { padding-left: 10px; padding-right: 10px; }
.settings-panel { padding: 5px 21px; }
.setting-row { padding: 20px 0; }
.setting-row code { border: 1px solid #e2ebe6; }
.management-section { padding: 22px 0; }
.password-section { padding-bottom: 24px; scroll-margin-top: 88px; }
.password-section .setting-help { font-size: 11px; color: var(--muted); margin: 5px 0 0; }
.password-form { max-width: 760px; margin-top: 18px; }
.password-form .form-actions { justify-content: flex-start; }
.push-settings-section { border-top: 1px solid var(--line); }
.push-settings-form { display: grid; gap: 18px; margin-top: 18px; max-width: 900px; }
.push-settings-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.push-settings-grid label, .push-quiet-label { display: grid; gap: 7px; color: #596a63; font-size: 11px; font-weight: 700; }
.push-settings-grid select, .push-quiet-label textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 10px; background: #fff; color: var(--ink); }
.setting-check { display: inline-flex!important; align-items: center; gap: 7px; color: var(--green-dark)!important; font-size: 12px!important; font-weight: 700!important; }
.setting-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.push-choice-group { border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; margin: 0; }
.push-choice-group legend { padding: 0 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.push-choice-list { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.push-quiet-label small { color: var(--muted); font-size: 10px; font-weight: 500; }
.push-quiet-label textarea { resize: vertical; }
.push-settings-feedback { min-height: 16px; margin: 0; color: var(--muted); font-size: 11px; }
@media (max-width: 900px) { .push-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .push-settings-grid { grid-template-columns: 1fr; } .push-choice-list { display: grid; grid-template-columns: 1fr 1fr; } }

.modal-backdrop { background: rgba(12, 34, 29, .48); backdrop-filter: blur(3px); }
.modal { width: min(740px, 100%); border-radius: 8px; box-shadow: var(--shadow-strong); padding: 27px; }
.modal-head { margin-bottom: 23px; }
.modal-head h2 { font-size: 21px; letter-spacing: -.02em; }
.close-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; font-size: 21px; transition: background .16s, color .16s; }
.close-btn:hover { background: #f0f5f2; color: var(--green-dark); }
.form-grid { gap: 17px; }
.form-grid input, .form-grid select, .form-grid textarea { border-color: #dbe6e1; border-radius: 6px; min-height: 40px; }
.form-grid label { color: #596a63; }
.file-drop { border-color: #b8d5c5; background: #f7fbf9; }
.file-drop:hover { background: #eef8f2; }
.modal.create-modal-wide { width: min(1040px, 100%); }
.create-modal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; align-items: start; }
.create-modal-form { min-width: 0; }
.ai-recognition-panel { position: sticky; top: 0; display: grid; gap: 12px; padding: 17px; border: 1px solid #d7e8df; border-radius: 8px; background: #f4faf7; }
.ai-recognition-panel h3 { margin: 4px 0 0; color: var(--green-dark); font-size: 16px; }
.ai-panel-copy, .ai-panel-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.ai-recognition-panel input { width: 100%; padding: 9px; border: 1px dashed #a8cdb9; border-radius: 6px; background: #fff; color: var(--ink); font-size: 11px; }
.ai-file-name { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ai-recognition-panel .primary-btn { width: 100%; }
.ai-status { color: var(--muted); font-size: 10px; line-height: 1.4; }
.detail-modal { max-width: 780px; }
.detail-item { border: 1px solid #e4eee9; background: #f7fbf9; }
.detail-actions { flex-wrap: wrap; }
.approve, .reject, .danger-action { min-height: 38px; border-radius: 6px; }
.attachment-upload { border: 1px solid #e2ece7; background: #f7fbf9; flex-direction: column; align-items: stretch; }
.attachment-upload-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.attachment-upload .file-drop { display: grid; gap: 5px; cursor: pointer; }
.attachment-upload .file-drop strong { color: var(--green-dark); font-size: 12px; }
.attachment-upload .file-drop small { overflow-wrap: anywhere; }
.attachment-upload .file-drop input { flex: none; }
.attachment-upload > .secondary-btn { align-self: flex-end; }
.file-drop { transition: background .16s, border-color .16s, box-shadow .16s; }
.file-drop-hint { color: var(--muted); font-size: 10px; font-weight: 500; }
.file-drop.is-dragover { border-color: var(--green-dark); border-style: solid; background: #e6f4ec; box-shadow: 0 0 0 3px rgba(31, 107, 72, .12); }
.file-drop.is-pasted { border-color: var(--green); background: #e6f4ec; }
.ai-drop { display: grid; gap: 8px; cursor: pointer; }
.audit-area { border-top-color: #e2ebe7; }
.toast { right: 28px; bottom: 28px; border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--shadow-strong); }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 224px minmax(0, 1fr); }
  .topbar { padding: 0 28px; }
  .page-wrap { padding: 32px 28px 42px; }
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .bottom-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .topbar { height: 62px; padding: 0 18px; }
  .user-copy small { display: none; }
  .user-copy strong { max-width: 92px; }
  .mobile-nav { position: sticky; top: 62px; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 7px 12px; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); box-shadow: 0 4px 12px rgba(25, 55, 47, .06); backdrop-filter: blur(8px); }
  .password-section { scroll-margin-top: 120px; }
  .mobile-nav .nav-item { min-height: 39px; justify-content: center; gap: 6px; padding: 7px 8px; color: #71827b; font-size: 11px; }
  .mobile-nav .nav-item.active { color: var(--green-dark); background: var(--green-soft); box-shadow: none; }
  .mobile-nav .nav-item.active::after { display: none; }
  .page-wrap { padding: 27px 18px 38px; }
  .page-header h1 { font-size: 28px; }
  .toolbar { align-items: flex-start; flex-direction: column; }
  .toolbar-controls { width: 100%; flex-wrap: wrap; }
  .search { flex: 1 1 100%; }
  .search input { width: 100%; }
  .toolbar select, .filter-btn { flex: 1 1 calc(33.33% - 8px); }
  .advanced-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottom-grid { grid-template-columns: 1fr; }
  .create-modal-layout { grid-template-columns: 1fr; }
  .ai-recognition-panel { position: static; }
}

@media (max-width: 520px) {
  .topbar { padding: 0 13px; }
  .topbar-actions { gap: 8px; }
  .user-copy { display: none; }
  .user-avatar { width: 28px; height: 28px; }
  .logout-btn, .password-shortcut { min-height: 34px; padding: 7px 8px; }
  .page-wrap { padding: 23px 13px 30px; }
  .page-header { margin-bottom: 22px; }
  .page-header h1 { font-size: 25px; }
  .page-header .primary-btn { width: 100%; margin-top: 16px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .stat-card { min-height: 125px; padding: 14px; }
  .stat-card > strong { font-size: 21px; }
  .stat-card > small { line-height: 1.4; }
  .toolbar { padding: 14px; }
  .toolbar-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .search { grid-column: 1 / -1; }
  .toolbar select, .filter-btn { width: 100%; }
  .advanced-filters { grid-template-columns: 1fr; padding: 13px 14px; }
  .batch-toolbar { align-items: stretch; flex-wrap: wrap; }
  .batch-toolbar strong { flex: 1 1 100%; }
  .batch-toolbar select, .batch-toolbar button { flex: 1; }
  th, td { padding-left: 14px; padding-right: 14px; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .quick-actions button { min-height: 108px; }
  .notice-panel, .archive-panel { padding: 16px; }
  .completion-row { gap: 14px; }
  .donut { width: 82px; height: 82px; }
  .donut:after { inset: 9px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid label.full { grid-column: auto; }
  .modal { max-height: calc(100vh - 24px); padding: 20px 16px; }
  .detail-list { grid-template-columns: 1fr 1fr; }
  .attachment-upload { flex-wrap: wrap; }
  .attachment-upload input { flex-basis: 100%; }
  .attachment-upload-zones { grid-template-columns: 1fr; }
  .attachment-upload > .secondary-btn { align-self: stretch; }
  .form-actions, .detail-actions { justify-content: stretch; }
  .form-actions > button, .detail-actions > button { flex: 1; }
}

/* Reimbursement detail: attachment previews and collapsed operation log. */
.attachment-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; text-align: left; color: var(--ink); }
.attachment-open:hover .attachment-meta strong { color: var(--green); }
.attachment-thumb { flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid #e0e9e5; border-radius: 6px; background: #f7fbf9; display: grid; place-items: center; overflow: hidden; }
.attachment-thumb img { width: 100%; height: 100%; object-fit: cover; }
.attachment-meta { min-width: 0; display: grid; gap: 2px; }
.attachment-meta strong { font-size: 11px; color: var(--green-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .16s; }
.attachment-meta small { font-size: 10px; color: var(--muted); }
.attachment-tools { display: flex; align-items: center; gap: 4px; }
.invoice-recognition { margin: 6px 0 16px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #f8fbf9; }
.invoice-recognition-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.invoice-recognition-head small, .invoice-note { font-size: 11px; color: var(--muted); }
.invoice-recognition-head small { overflow-wrap: anywhere; }
.invoice-recognition-head button:disabled { opacity: .6; cursor: wait; }
.invoice-items { margin-top: 12px; overflow-x: auto; }
.invoice-items table { min-width: 0; table-layout: fixed; background: #fff; }
.invoice-items th, .invoice-items td { white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px; vertical-align: top; }
.invoice-items th:first-child, .invoice-items td:first-child { width: 48px; }
.invoice-items tbody tr { cursor: default; }
.invoice-note { margin: 10px 0 0; line-height: 1.6; }
.file-badge { display: inline-grid; place-items: center; min-width: 28px; height: 20px; padding: 0 5px; border-radius: 4px; background: #e9f1ed; color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .03em; }
.audit-area summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; color: var(--green-dark); font-size: 12px; font-weight: 700; }
.audit-area summary::-webkit-details-marker { display: none; }
.audit-area summary:hover { color: var(--green); }
.audit-summary { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; }
.audit-summary i { font-style: normal; transition: transform .16s; }
.audit-area[open] .audit-summary i { transform: rotate(180deg); }
.audit-area[open] summary { margin-bottom: 4px; }
.audit-list { padding-top: 6px; }
#preview-modal { z-index: 12; }
.preview-modal { width: min(920px, 100%); }
.preview-body { display: grid; place-items: center; min-height: 180px; max-height: calc(100vh - 250px); overflow: auto; border: 1px solid #e2ebe7; border-radius: 6px; background: #f7fbf9; padding: 12px; }
.preview-body img { display: block; max-width: 100%; max-height: calc(100vh - 290px); border-radius: 4px; }
.preview-body iframe { width: 100%; height: calc(100vh - 290px); min-height: 420px; border: 0; border-radius: 4px; background: #fff; }
.preview-fallback { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; text-align: center; color: var(--muted); }
.preview-fallback p { margin: 0; font-size: 12px; color: var(--green-dark); }
.preview-fallback small { font-size: 11px; }
.preview-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

@media (max-width: 520px) {
  .preview-modal .modal-head h2 { word-break: break-all; }
  .preview-body iframe { min-height: 320px; height: calc(100vh - 260px); }
}
.upload-progress{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);width:min(360px,calc(100vw - 40px));background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 50px rgba(20,40,30,.2);padding:12px 14px;z-index:40;display:grid;gap:7px}.upload-progress-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--green-dark)}.upload-progress-track{height:6px;border-radius:3px;background:#e7efea;overflow:hidden}.upload-progress-track i{display:block;height:100%;width:0;background:var(--green);transition:width .15s}.upload-progress small{font-size:10px;color:var(--muted)}
.proof-badges { display: inline-flex; gap: 4px; }
.proof-badge { border: 1px solid var(--line); border-radius: 10px; padding: 3px 7px; background: #f3f5f4; color: #a3ada8; font-size: 10px; font-weight: 700; }
.proof-badge.is-done.proof-physical_photo { border-color: #d8c6ee; background: var(--purple-bg); color: var(--purple); }
.proof-badge.is-done.proof-electronic_invoice { border-color: #bcd3f0; background: var(--blue-bg); color: var(--blue); }
.proof-badge.is-done.proof-payment_screenshot { border-color: #b8dcc6; background: var(--green-soft); color: var(--green); }
.upload-progress.is-indeterminate .upload-progress-track i{width:35%;animation:progress-indeterminate 1.1s ease-in-out infinite}
@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(290%)}}