:root{--p:#1989FA;--s:#07C160;--d:#F56C6C;--w:#E6A23C;--bg:#F0F2F5;--c:#FFF;--b:#EBEDF0;--t:#303133;--t2:#606266;--h:#909399;--sb:#1F2A40;--sw:220px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:PingFang SC,Microsoft YaHei,sans-serif;background:var(--bg);height:100vh;overflow:hidden}
.login-page{position:fixed;inset:0;z-index:200;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);display:flex;align-items:center;justify-content:center;flex-direction:column}
.login-card{background:#FFF;border-radius:16px;padding:40px 36px;width:400px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:pop .3s}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo i{width:60px;height:60px;background:var(--p);border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:#FFF;font-size:26px;font-weight:700;font-style:normal;margin-bottom:10px}
.login-logo h2{font-size:20px;color:var(--t)}.login-logo p{font-size:12px;color:var(--h)}
.fg{margin-bottom:18px;position:relative}.fg span{position:absolute;left:12px;top:50%;transform:translateY(-50%)}
.fg input{width:100%;padding:11px 14px 11px 38px;border:2px solid var(--b);border-radius:10px;font-size:14px;outline:none;background:var(--bg);font-family:inherit}
.fg input:focus{border-color:var(--p);background:#FFF}
.le{color:var(--d);font-size:12px;text-align:center;margin-bottom:14px;display:none}.le.show{display:block}
.lt{display:flex;gap:6px;background:var(--bg);border-radius:10px;padding:4px;margin-bottom:20px}
.lt span{flex:1;text-align:center;padding:8px 0;border-radius:8px;cursor:pointer;font-size:13px;color:var(--h);user-select:none}
.lt span.on{background:var(--p);color:#FFF;font-weight:600}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;font-family:inherit;line-height:1.4}
.btn-p{background:var(--p);color:#FFF}.btn-s{background:var(--s);color:#FFF}.btn-o{background:#FFF;color:var(--t);border-color:var(--b)}.btn-t{background:none;color:var(--p);padding:4px 8px;border:none}.btn-sm{padding:4px 10px;font-size:12px}.btn-lg{width:100%;padding:11px;font-size:15px;font-weight:600;justify-content:center}
.layout{display:none;height:100vh}.layout.show{display:flex}
.sidebar{width:var(--sw);background:var(--sb);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.sb-logo{height:56px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08);gap:10px}
.sb-logo i{width:30px;height:30px;background:var(--p);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:14px;font-weight:700;font-style:normal}
.sb-logo b{color:#FFF;font-size:14px;font-weight:600}
.sb-nav{flex:1;overflow-y:auto;padding:6px 0}
.sb-item{display:flex;align-items:center;padding:9px 18px;color:#BFCBD9;cursor:pointer;gap:8px;font-size:13px;border-left:3px solid transparent;user-select:none;transition:all .15s}
.sb-item:hover{background:#2A3A5C;color:#FFF}.sb-item.on{background:rgba(25,137,250,.15);color:#FFF;border-left-color:var(--p)}
.sb-sub{padding-left:28px;font-size:12px}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.hdr{height:56px;background:var(--c);display:flex;align-items:center;padding:0 20px;box-shadow:0 1px 3px rgba(0,0,0,.06);gap:16px}
.hdr-sp{flex:1}.hdr-u{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px}
.av{width:30px;height:30px;border-radius:50%;background:var(--p);color:#FFF;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.mc{flex:1;overflow-y:auto;padding:20px}
.ph{margin-bottom:14px}.ph h2{font-size:19px;font-weight:600;color:var(--t)}.ph p{font-size:12px;color:var(--h)}
.card{background:var(--c);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:18px;margin-bottom:14px}
.ct{border-bottom:1px solid var(--b);padding-bottom:10px;margin-bottom:14px;font-size:14px;font-weight:600}
.sr{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.sc{background:var(--c);border-radius:8px;padding:16px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.sc .v{font-size:24px;font-weight:700;color:var(--t)}.sc .l{font-size:11px;color:var(--h)}
.fb{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.fb input,.fb select{border:1px solid var(--b);border-radius:4px;padding:7px 10px;font-size:13px;outline:none;background:var(--c);font-family:inherit}.fb input:focus,.fb select:focus{border-color:var(--p)}.fb input{width:200px}
.tb{overflow-x:auto}table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;text-align:left;font-size:13px;border-bottom:1px solid var(--b)}
th{background:#FAFAFA;color:var(--t2);font-weight:600;font-size:12px}tr:hover{background:#F5F7FA}
.badge{display:inline-flex;padding:3px 8px;border-radius:10px;font-size:11px;font-weight:500}
.bg-s{background:#E8F8EE;color:var(--s)}.bg-d{background:#FEF0F0;color:var(--d)}.bg-w{background:#FDF6EC;color:var(--w)}.bg-p{background:#ECF5FF;color:var(--p)}
.emp{text-align:center;padding:40px 20px;color:var(--h)}.emp i{font-size:40px;display:block;margin-bottom:10px;font-style:normal}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50}
.drawer{position:fixed;top:0;right:0;width:520px;max-width:100vw;height:100vh;background:#FFF;z-index:51;box-shadow:-4px 0 16px rgba(0,0,0,.12);display:flex;flex-direction:column;animation:drIn .25s}
@keyframes drIn{from{transform:translateX(40px);opacity:0}}
.dr-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--b)}.dr-hd h3{font-size:15px;font-weight:600}
.dr-hd button{width:28px;height:28px;border-radius:50%;border:none;background:none;cursor:pointer;font-size:16px;color:var(--h)}
.dr-bd{flex:1;overflow-y:auto;padding:18px 20px}.dr-ft{padding:14px 20px;border-top:1px solid var(--b);display:flex;gap:10px;justify-content:flex-end}
.fg2{margin-bottom:16px}.fg2 label{display:block;font-size:13px;font-weight:500;color:var(--t);margin-bottom:5px}
.fg2 input,.fg2 select,.fg2 textarea{width:100%;padding:8px 10px;border:1px solid var(--b);border-radius:4px;font-size:13px;outline:none;font-family:inherit;background:var(--c)}
.fg2 input:focus,.fg2 select:focus,.fg2 textarea:focus{border-color:var(--p)}.fg2 textarea{min-height:70px;resize:vertical}.fr{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:300;background:rgba(0,0,0,.8);color:#FFF;padding:10px 22px;border-radius:6px;font-size:13px;animation:toastIn .3s}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}}.toast.e{background:rgba(245,108,108,.9)}.toast.s{background:rgba(7,193,96,.9)}
.amount{color:var(--d)}@media(max-width:768px){.sr{grid-template-columns:repeat(2,1fr)}.fr{grid-template-columns:1fr}}


/* Enhanced Customer Form */
.fg2 label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #606266;
}
.fg2 input, .fg2 select, .fg2 textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    transition: border-color .2s;
    box-sizing: border-box;
}
.fg2 input:focus, .fg2 select:focus, .fg2 textarea:focus {
    outline: none;
    border-color: #1989FA;
    box-shadow: 0 0 0 2px rgba(25,137,250,0.1);
}
.fg2 textarea {
    min-height: 80px;
    resize: vertical;
}
.fr {
    display: flex;
    gap: 16px;
    margin-bottom: 4px;
}
.fr .fg2 {
    flex: 1;
}
.drawer .dr-bd {
    padding: 16px 20px;
}
.drawer .dr-hd {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.drawer .dr-ft {
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    text-align: right;
}
.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}
.ph {
    padding: 16px 0 8px;
}

/* Pagination Bar */
.pagination-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    padding: 10px 0;
    flex-wrap: wrap;
}
.pagination-bar select {
    padding: 5px 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 12px;
    background: #fff;
    color: #606266;
}
.pg-btn {
    padding: 5px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    color: #606266;
    transition: all .2s;
}
.pg-btn:hover { border-color: #1989FA; color: #1989FA; }
.pg-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.pg-refresh { background: #1989FA; color: #fff; border-color: #1989FA; }
.pg-refresh:hover { background: #409EFF; }
.pg-info { font-size: 12px; color: #909399; min-width: 100px; text-align: center; }

/* ===== Visit Module ===== */
/* Sidebar */
.v-sidebar { font-size: 13px; color: var(--t2); background: var(--c); }
.v-panel-hd { font-size: 14px; font-weight: 600; color: var(--t); }
.v-panel-hd:hover { background: #F5F7FA; border-radius: 4px; }
.v-panel-bd { font-size: 13px; line-height: 1.8; color: var(--t2); }

/* Form fields — match .fg2 standard */
.v-fg { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.v-fg label { font-size: 13px; font-weight: 500; color: var(--t); white-space: nowrap; }
.v-fg input, .v-fg select, .v-fg textarea {
    padding: 8px 10px; border: 1px solid var(--b); border-radius: 4px;
    font-size: 13px; font-family: inherit; background: var(--c); color: var(--t);
}
.v-fg input:focus, .v-fg select:focus, .v-fg textarea:focus { outline: none; border-color: var(--p); }
.v-fg textarea { resize: vertical; min-height: 60px; }
.v-fg input[readonly] { background: #F5F7FA; color: var(--t2); }

/* Header bar */
.v-info-bar { font-size: 12px; color: var(--h); }

/* Tabs */
.v-tab { font-size: 13px; font-weight: 500; }
.v-tab:hover { color: var(--p) !important; }
.v-tab.on { color: var(--p); font-weight: 600; }

/* Customer profile in sidebar */
.v-profile-name { font-size: 14px; font-weight: 700; color: var(--t); margin-bottom: 6px; }
.v-profile-item { font-size: 13px; line-height: 1.9; color: var(--t2); }
.v-profile-item b { color: var(--t); }

/* Comment/task lists */
.v-comment-item { padding: 6px 0; border-bottom: 1px solid var(--b); font-size: 13px; }
.v-task-item { padding: 4px 0; border-bottom: 1px solid var(--b); font-size: 13px; }

/* Responsive */
@media (max-width: 900px) {
    .v-sidebar { width: 200px !important; min-width: 200px !important; }
}
@media (max-width: 600px) {
    .v-sidebar { display: none !important; }
}