668 lines
47 KiB
CSS
668 lines
47 KiB
CSS
@charset "UTF-8";
|
|
|
|
:root {
|
|
--canvas:#f5f7fc; --surface:#fff; --ink:#20283e; --muted:#77839a;
|
|
--accent:#5360ea; --accent-dark:#414dd1; --accent-soft:#eff1ff;
|
|
--border:#e9edf5; --success:#168576; --warning:#a96616; --danger:#c4495a;
|
|
font-family:"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
|
|
font-size:14px; font-synthesis:none; color:var(--ink); background:var(--canvas);
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
* {box-sizing:border-box}
|
|
body {margin:0}
|
|
.bootstrap {min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;color:var(--muted)}
|
|
.auth-shell {min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,1fr);background:white}
|
|
.auth-story {padding:48px 58px 30px;background:#f0f3fc;display:flex;flex-direction:column;border-right:1px solid #e2e7f4}
|
|
.auth-story .brand {margin:0;align-self:flex-start}
|
|
.auth-story-content {max-width:560px;margin:auto 0;padding:60px 0}
|
|
.auth-story h1 {font-size:43px;line-height:1.4;letter-spacing:1px;font-weight:700;margin-bottom:23px}
|
|
.auth-story-content>p {font-size:14px;line-height:2.1;color:#6f7e9c}
|
|
.connection-illustration {display:flex;align-items:center;gap:40px;margin-top:48px;padding:28px 0}
|
|
.illustration-sim {width:146px;height:178px;border:1px solid #c6ceee;flex:none;background:white;clip-path:polygon(0 0,76% 0,100% 20%,100% 100%,0 100%);border-radius:9px;position:relative;display:flex;flex-direction:column;padding:21px;transform:rotate(-6deg)}
|
|
.illustration-sim>.icon {color:var(--accent);width:27px;height:27px;margin-bottom:14px}
|
|
.illustration-sim>span {font-size:11px;color:#6e7daa}
|
|
.sim-chip {display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:62px;height:47px;margin-top:20px;background:#e2e6ff;border:1px solid #9faaf2;border-radius:6px;overflow:hidden}
|
|
.sim-chip i {background:#eff1ff;border:1px solid #c7cefa}
|
|
.illustration-timeline {display:grid;gap:27px}
|
|
.illustration-timeline>div {position:relative;padding-left:23px}
|
|
.illustration-timeline>div:not(:last-child)::after {content:"";position:absolute;top:15px;bottom:-30px;left:4px;width:1px;background:#c7d0ee}
|
|
.timeline-dot {position:absolute;left:0;top:5px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px #e2e6ff;z-index:1}
|
|
.timeline-dot.done {background:#39a390;box-shadow:none}
|
|
.timeline-dot.hollow {background:#f0f3fc;box-shadow:none;border:1px solid #99a8c8}
|
|
.illustration-timeline strong {font-size:12px;font-weight:550;display:block}
|
|
.illustration-timeline small {font-size:10px;display:block;color:#8c98b2;margin-top:6px;line-height:1.8}
|
|
.auth-story-foot {font-size:11px;color:#8d9ab5}
|
|
.auth-panel {position:relative;display:flex;align-items:center;justify-content:center;padding:60px 42px 90px}
|
|
.auth-form-wrap {width:100%;max-width:350px}
|
|
.auth-tabs {display:flex;gap:26px;border-bottom:1px solid var(--border);margin-bottom:34px}
|
|
.auth-tabs button {padding:11px 0;font-size:13px;color:var(--muted);position:relative}
|
|
.auth-tabs button.active {color:var(--accent);font-weight:650}
|
|
.auth-tabs button.active::after {content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--accent)}
|
|
.auth-form-wrap h2 {font-size:23px;font-weight:650;margin-bottom:10px}
|
|
.auth-intro {font-size:12px;line-height:1.8;color:var(--muted);margin-bottom:28px}
|
|
#auth-form {display:grid;gap:21px}
|
|
#auth-form .field input {padding:12px 14px;font-size:13px}
|
|
.auth-submit {width:100%;padding:13px;margin-top:6px;justify-content:space-between}
|
|
.auth-account-note {display:flex;align-items:center;justify-content:center;gap:6px;margin-top:25px;color:#95a0b5;font-size:11px}
|
|
.auth-account-note>.icon {width:14px;height:14px}
|
|
.auth-footer {position:absolute;bottom:30px;font-size:10px;color:#a1aabc}
|
|
.channel-actions {display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:17px}
|
|
.channel-help {font-size:10px;color:var(--muted);line-height:1.8;margin-top:12px}
|
|
.service-status {display:grid;gap:10px;border-top:1px solid var(--border);padding-top:17px;margin-top:17px;font-size:10px;color:var(--muted)}
|
|
.service-status>span {display:flex;justify-content:space-between}
|
|
.service-status strong {font-weight:500;color:var(--ink)}
|
|
.binding-steps {display:grid;gap:19px}
|
|
.binding-steps a {text-decoration:none}
|
|
.binding-steps>p {font-size:12px;line-height:1.9;color:var(--muted)}
|
|
.binding-steps .field input {font-size:10px}
|
|
.notification-log {margin-top:35px}
|
|
.notification-log-empty {display:flex;align-items:center;gap:12px;background:white;border:1px dashed #dce2f0;border-radius:9px;padding:27px;font-size:11px;color:var(--muted);line-height:1.9}
|
|
.money-summary {display:grid;grid-template-columns:1fr 1fr;margin:17px 0 22px;padding:19px 24px;background:white;border:1px solid var(--border);border-radius:10px;gap:24px}
|
|
.money-summary>div {min-width:0}
|
|
.money-summary>div+div {border-left:1px solid var(--border);padding-left:24px}
|
|
.money-summary h2 {display:flex;align-items:center;gap:7px;font-size:11px;font-weight:500;color:var(--muted);margin-bottom:12px}
|
|
.money-summary h2 .icon {width:15px;height:15px}
|
|
.money-summary p {font-size:10px;color:var(--muted);line-height:1.8;margin-top:9px}
|
|
.money-tags {display:flex;flex-wrap:wrap;gap:5px 8px;align-items:center;min-width:0}
|
|
.money-tag {display:inline-block;background:#f3f5fc;color:#576482;border:1px solid #e8edf7;border-radius:5px;padding:4px 7px;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
|
|
.money-unknown {color:var(--muted);font-size:10px}
|
|
.card-balance {display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;padding-top:4px;min-width:0}
|
|
.card-balance>span {font-size:10px;color:var(--muted);line-height:25px;flex:none}
|
|
.card-balance .money-tag {font-size:10px;padding:3px 6px}
|
|
.card-rule-name {min-width:0}
|
|
.card-rule-name>span {white-space:normal;line-height:1.8}
|
|
.task-info p {flex-wrap:wrap}
|
|
.task-info .renewal-cost {font-variant-numeric:tabular-nums;color:var(--accent);font-weight:550}
|
|
.detail-money {grid-column:1/-1}
|
|
.detail-rule-cost {font-size:11px;display:flex;gap:12px;align-items:center;color:var(--muted);margin-top:12px}
|
|
.detail-rule-cost strong {font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
|
|
#balance-fields {display:grid;gap:12px}
|
|
.balance-row {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px;gap:12px;align-items:end}
|
|
.balance-row>.icon-button {height:39px;padding:5px}
|
|
.form-help {font-size:10px;color:var(--muted);line-height:1.8;margin-top:11px}
|
|
.form-section-title>h3 {font-size:12px;font-weight:600}
|
|
.balance-action {margin-top:19px;align-items:flex-start}
|
|
.balance-action input {margin-top:3px;flex:none}
|
|
.calculation-preview.balance-preview strong {font-size:12px;text-align:right;line-height:1.7;max-width:65%;white-space:normal;overflow-wrap:anywhere}
|
|
.balance-preview .money-error {color:var(--danger);font-size:10px}
|
|
@media(max-width:600px) {
|
|
.money-summary {grid-template-columns:1fr;padding:18px 20px;gap:15px}
|
|
.money-summary>div+div {border-left:0;border-top:1px solid var(--border);padding:15px 0 0}
|
|
.balance-row {gap:8px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 26px}
|
|
.balance-row .field select,.balance-row .field input {padding:10px 7px;font-size:11px}
|
|
}
|
|
.status.success {background:#eaf8f3;color:#168576}
|
|
.status.danger {background:#fff0f1;color:#c4495a}
|
|
.user-text {min-width:0}
|
|
.user-text strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
@media(max-width:1000px) {
|
|
.auth-story {padding:38px 35px 25px}
|
|
.auth-story h1 {font-size:33px}
|
|
.connection-illustration {gap:25px}
|
|
.illustration-sim {width:116px;height:157px;padding:17px}
|
|
}
|
|
@media(max-width:760px) {
|
|
.auth-shell {grid-template-columns:1fr}
|
|
.auth-story {padding:26px;border-right:0;border-bottom:1px solid #e2e7f4}
|
|
.auth-story .brand {gap:9px}
|
|
.auth-story .brand-symbol {width:33px;height:36px}
|
|
.auth-story .brand-name {font-size:18px}
|
|
.auth-story .brand-name {display:block}
|
|
.auth-story-content {padding:29px 0 0;max-width:none}
|
|
.auth-story h1 {font-size:27px;line-height:1.5;margin-bottom:12px}
|
|
.auth-story h1 br {display:initial}
|
|
.auth-story-content>p {font-size:12px;line-height:1.9}
|
|
.connection-illustration,.auth-story-foot {display:none}
|
|
.auth-panel {padding:30px 26px 76px;align-items:flex-start}
|
|
.auth-form-wrap {max-width:420px}
|
|
.auth-tabs {margin-bottom:24px}
|
|
.auth-form-wrap h2 {font-size:21px}
|
|
.auth-intro {margin-bottom:24px}
|
|
.auth-footer {bottom:22px}
|
|
}
|
|
button,input,select,textarea {font:inherit}
|
|
button {cursor:pointer}
|
|
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent }
|
|
button {color:inherit}
|
|
button:disabled {cursor:not-allowed;opacity:.5}
|
|
button:focus-visible,a:focus-visible {outline:3px solid #8b94ff;outline-offset:3px}
|
|
input:focus,select:focus,textarea:focus {outline:2px solid #9aa3ff;outline-offset:1px;border-color:var(--accent)}
|
|
button {border:0;background:none}
|
|
h1,h2,h3,h4,p {margin:0}
|
|
svg.icon {width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
|
|
.small-icon svg.icon {width:16px;height:16px}
|
|
.app-shell {display:grid;grid-template-columns:222px minmax(0,1fr);min-height:100vh}
|
|
.sidebar {position:fixed;inset:0 auto 0 0;width:222px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:30;padding:33px 17px 18px}
|
|
.brand {display:flex;align-items:center;gap:11px;margin:0 15px 45px;text-decoration:none;color:var(--ink)}
|
|
.brand-symbol {width:39px;height:42px;background:var(--accent);border-radius:11px;display:grid;place-items:center;color:white;box-shadow:0 4px 9px #5360ea21}
|
|
.brand-symbol svg {width:26px;height:30px}
|
|
.brand-name {font-size:21px;font-weight:750;letter-spacing:1.2px;line-height:1.3}
|
|
.brand-name small {display:block;font-size:10px;letter-spacing:1.8px;font-weight:550;color:#97a0b4;margin-top:4px}
|
|
.nav-caption {font-size:11px;color:#939daf;padding-left:20px;margin-bottom:13px}
|
|
.nav-list {display:grid;gap:7px}
|
|
.nav-button {position:relative;display:flex;align-items:center;gap:13px;text-align:left;width:100%;padding:12px 18px;border-radius:8px;color:#7b8498;font-size:13px;font-weight:500;transition:background .15s}
|
|
.nav-button:hover {background:#f7f8fc;color:var(--ink)}
|
|
.nav-button.active {background:var(--accent-soft);color:var(--accent);font-weight:650}
|
|
.nav-button.active::before {content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:4px;background:var(--accent)}
|
|
.nav-count {margin-left:auto;font-size:10px;line-height:19px;min-width:20px;border-radius:5px;text-align:center;background:#e0e4ff;color:var(--accent);font-weight:700}
|
|
.sidebar-spacer {flex:1;min-height:32px}
|
|
.sidebar-note {margin:14px 9px 23px;padding:16px 14px 14px;background:#f8f9ff;border:1px solid #eceefb;border-radius:10px;position:relative;overflow:hidden}
|
|
.sidebar-note::after {content:"";position:absolute;width:65px;height:65px;border:1px solid #e2e6ff;border-radius:50%;right:-28px;top:-24px}
|
|
.note-icon {color:var(--accent);margin-bottom:9px}
|
|
.sidebar-note h4 {font-size:12px;font-weight:600;margin-bottom:6px}
|
|
.sidebar-note p {font-size:10px;line-height:1.9;color:#8a93a8}
|
|
.sidebar-note button {font-size:11px;color:var(--accent);display:flex;align-items:center;gap:8px;margin-top:11px;padding:0}
|
|
.sidebar-user {border-top:1px solid var(--border);padding:18px 9px 1px;display:flex;align-items:center;gap:10px;width:100%;text-align:left}
|
|
.avatar {width:34px;height:34px;border-radius:11px;background:#eee7e0;color:#8b6c55;display:grid;place-items:center;flex:none;font-size:12px;font-weight:600}
|
|
.user-text {flex:1}
|
|
.user-text strong {font-size:12px;font-weight:600;display:block}
|
|
.user-text small {font-size:10px;color:#99a1b2;display:block;margin-top:3px}
|
|
.main-shell {grid-column:2;min-width:0}
|
|
.topbar {height:77px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#fff;border-bottom:1px solid var(--border);gap:20px}
|
|
.breadcrumbs {display:flex;align-items:center;gap:13px;font-size:12px;color:#99a1b3;white-space:nowrap}
|
|
.breadcrumbs strong {font-weight:500;color:#657087}
|
|
.breadcrumbs svg.icon {width:13px;height:13px}
|
|
.topbar-right {display:flex;align-items:center;gap:19px}
|
|
.global-search {display:flex;align-items:center;gap:9px;padding:9px 11px;width:245px;border:1px solid var(--border);border-radius:7px;background:#f9fafc;color:#a3acc0}
|
|
.global-search svg {width:16px;height:16px}
|
|
.global-search input {border:0;outline:none;background:none;width:100%;font-size:11px;min-width:0;color:var(--ink)}
|
|
.global-search input:focus {outline:none}
|
|
.global-search:focus-within {outline:2px solid #abb2ff}
|
|
.global-search input::placeholder {color:#99a3b5}
|
|
kbd {font:10px Arial;color:#a5adbc;border:1px solid #e2e6ef;padding:1px 4px;border-radius:3px;white-space:nowrap}
|
|
.icon-button {display:inline-flex;align-items:center;justify-content:center;padding:7px;color:#818b9e;border-radius:7px;gap:4px}
|
|
.icon-button:hover {background:var(--accent-soft);color:var(--accent)}
|
|
.notification-button {position:relative}
|
|
.notification-button::after {content:"";position:absolute;width:5px;height:5px;background:var(--accent);border:2px solid white;border-radius:50%;top:6px;right:8px;box-sizing:content-box}
|
|
.topbar-divider {height:23px;width:1px;background:var(--border);margin:0 -4px}
|
|
.topbar-avatar {display:flex;align-items:center;gap:7px;padding:0}
|
|
.topbar-avatar .avatar {width:32px;height:32px;border-radius:50%}
|
|
.mobile-menu {display:none}
|
|
.content {padding:29px 34px 30px;max-width:1550px;margin:auto}
|
|
.page-heading {display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:27px}
|
|
.heading-title {display:flex;align-items:center;gap:12px;margin-bottom:8px}
|
|
h1 {font-size:27px;font-weight:650;letter-spacing:-.5px}
|
|
.demo-badge {font-size:9px;border:1px solid #dfe4f1;color:#8893a9;padding:3px 6px;border-radius:4px;background:#fff;white-space:nowrap;letter-spacing:.3px}
|
|
.page-heading p {font-size:12px;color:var(--muted);line-height:1.8}
|
|
.heading-actions {display:flex;gap:10px;flex:none}
|
|
.btn {display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:7px;padding:10px 15px;font-size:12px;line-height:1.4;font-weight:500;white-space:nowrap;border:1px solid var(--border);background:white}
|
|
.btn svg.icon {width:16px;height:16px}
|
|
.btn:hover {border-color:#c5ccdd;background:#fafbfe}
|
|
.btn-primary {color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:0 3px 7px #5360ea16}
|
|
.btn-primary:hover {background:var(--accent-dark);border-color:var(--accent-dark)}
|
|
.btn-soft {background:var(--accent-soft);color:var(--accent);border-color:#e3e7ff}
|
|
.btn-danger {color:var(--danger);border-color:#f0d9de;background:#fff6f8}
|
|
.btn-small {font-size:11px;padding:7px 11px;border-radius:6px}
|
|
.text-button {padding:0;color:var(--accent);display:inline-flex;align-items:center;gap:5px;font-size:11px;white-space:nowrap}
|
|
.text-button svg.icon {width:14px;height:14px}
|
|
.stat-strip {display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--border);border-radius:12px;padding:23px 0;margin-bottom:23px}
|
|
.stat {padding:0 24px;position:relative;border-right:1px solid var(--border)}
|
|
.stat:last-child {border-right:0}
|
|
.stat-label {font-size:11px;color:#78849a;display:flex;align-items:center;gap:7px}
|
|
.stat-label svg.icon {width:15px;height:15px;color:#949eb3}
|
|
.stat-line {display:flex;align-items:baseline;gap:8px;margin-top:8px}
|
|
.stat-value {font-size:31px;line-height:1.2;font-weight:650;letter-spacing:-1px;font-variant-numeric:tabular-nums}
|
|
.stat-unit {font-size:11px;color:#8e98ac}
|
|
.stat-foot {font-size:10px;color:#98a1b2;line-height:1.7;margin-top:8px}
|
|
.stat-foot .stat-colored {color:var(--accent);font-weight:600}
|
|
.stat:nth-child(2) .stat-value {color:#d59a3e}
|
|
.stat:nth-child(2) .stat-foot {color:#b68e54}
|
|
.renewal-strip {border-radius:10px;background:#edf0ff;border:1px solid #e4e8fc;padding:17px 21px;margin-bottom:27px;display:flex;align-items:center;gap:19px;position:relative}
|
|
.renewal-strip-icon {width:39px;height:39px;border-radius:10px;background:#fff;display:grid;place-items:center;color:var(--accent);flex:none}
|
|
.renewal-intro {flex:none;min-width:125px}
|
|
.renewal-intro h3 {font-size:12px;font-weight:650;margin-bottom:5px}
|
|
.renewal-intro p {font-size:10px;color:#8690b0}
|
|
.renewal-pills {display:flex;flex:1;gap:18px;justify-content:space-around;min-width:0}
|
|
.renewal-pill {display:flex;align-items:center;gap:9px;min-width:0;text-align:left;padding:0}
|
|
.renewal-pill .provider-mini {width:29px;height:29px;font-size:15px;border-radius:8px}
|
|
.renewal-pill strong {font-size:10px;display:block;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px}
|
|
.renewal-pill small {font-size:9px;color:#8992af;display:block;margin-top:4px;white-space:nowrap}
|
|
.renewal-strip>.text-button {flex:none;margin-left:5px;font-size:10px}
|
|
.workspace-grid {display:grid;grid-template-columns:minmax(0,1fr) 274px;gap:24px;align-items:start}
|
|
.section-header {display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:14px}
|
|
.section-title {font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
|
|
.section-title .count {font-size:10px;font-weight:500;color:#929bb0;background:#e9edf5;padding:2px 6px;border-radius:4px}
|
|
.section-controls {display:flex;gap:8px;align-items:center}
|
|
.segmented {display:flex;gap:2px;background:#e9edf5;padding:3px;border-radius:7px;align-items:center}
|
|
.segmented button {font-size:10px;color:#8c95a9;padding:5px 11px;border-radius:5px;white-space:nowrap}
|
|
.segmented button.active {color:var(--ink);background:white;box-shadow:0 1px 3px #1720390b;font-weight:550}
|
|
.segmented button span {font-size:9px;margin-left:4px;color:#a3acbc}
|
|
.view-toggle {display:flex;gap:0;border:1px solid #e2e6ee;border-radius:6px;overflow:hidden;background:white}
|
|
.view-toggle button {padding:5px 7px;color:#a2abbd;display:flex}
|
|
.view-toggle button svg {width:15px;height:15px}
|
|
.view-toggle button.active {background:#eef0ff;color:var(--accent)}
|
|
.card-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
|
|
.sim-card {border:1px solid #e4e9f2;background:white;border-radius:12px;padding:19px 19px 0;min-width:0;position:relative;transition:border-color .16s,box-shadow .16s}
|
|
.sim-card:hover {border-color:#c9cff3;box-shadow:0 5px 19px #30395007}
|
|
.card-top {display:flex;align-items:center;gap:11px;margin-bottom:17px}
|
|
.provider-logo,.provider-mini {display:grid;place-items:center;background:var(--brand-color);color:white;font-size:22px;font-weight:750;border-radius:10px;width:39px;height:40px;font-family:Arial,sans-serif;flex:none;line-height:1}
|
|
.provider-logo[data-provider="giffgaff"] {background:#f8fafc;color:#263044;border:1px solid #e4e9f2;font-size:31px;font-weight:800}
|
|
.provider-logo[data-provider="3HK"] {font-size:29px;font-weight:800}
|
|
.provider-mini {width:31px;height:31px;font-size:16px;border-radius:8px}
|
|
.card-heading {flex:1;min-width:0}
|
|
.card-heading button {display:block;padding:0;max-width:100%;text-align:left}
|
|
.card-heading h3 {font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.card-heading p {font-size:11px;color:#7c889e;margin-top:5px}
|
|
.type-tag {font-size:9px;padding:3px 6px;border-radius:4px;background:#eef0ff;color:#5863c5;letter-spacing:.2px;font-weight:650;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
|
|
.type-tag.physical {background:#eef2f6;color:#8b96a7}
|
|
.type-tag svg {width:11px;height:11px}
|
|
.card-top>.icon-button {padding:3px;margin-right:-6px;margin-left:-2px}
|
|
.card-top>.icon-button svg {width:16px;height:16px}
|
|
.card-number {display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:17px;letter-spacing:.3px;font-variant-numeric:tabular-nums;font-weight:500;min-height:24px}
|
|
.card-number.data-number {font-size:13px;letter-spacing:0;color:#525e75}
|
|
.flag {width:18px;height:13px;flex:none;display:inline-block;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px #00000007;position:relative}
|
|
.flag svg {display:block;width:100%;height:100%}
|
|
.card-meta {display:flex;gap:13px;font-size:10px;color:#7c889e;margin-bottom:17px}
|
|
.card-meta span {display:flex;align-items:center;gap:4px}
|
|
.card-meta svg {width:12px;height:12px}
|
|
.card-rule {padding:11px 12px;background:#f7f8fc;border-radius:7px;display:flex;align-items:center;gap:8px;margin-bottom:14px;position:relative}
|
|
.card-rule>.icon {width:15px;height:15px;color:#7f8aaa}
|
|
.card-rule-name {font-size:11px;font-weight:500;flex:1;display:flex;align-items:center;gap:7px}
|
|
.card-rule-name span {font-size:10px;color:#7e8ba3;font-weight:400}
|
|
.card-rule-date {font-size:11px;font-weight:600;color:#536482;font-variant-numeric:tabular-nums}
|
|
.platform-label {font-size:10px;color:#7e8ba3;margin-bottom:9px;display:flex;align-items:center;gap:5px}
|
|
.platform-label svg {width:12px;height:12px}
|
|
.platform-tags {display:flex;gap:5px;flex-wrap:wrap;min-height:21px;margin-bottom:16px}
|
|
.platform-tag {font-size:9px;color:#68758e;border:1px solid #e4e9f2;background:white;border-radius:4px;padding:4px 6px;display:inline-flex;align-items:center;gap:4px;line-height:1.25}
|
|
.platform-tag .platform-dot {width:9px;height:9px;border-radius:3px;background:var(--platform-color,#7885a7);display:grid;place-items:center;color:#fff;font:bold 7px Arial}
|
|
.card-footer {border-top:1px solid #edf0f6;display:flex;align-items:center;justify-content:space-between;margin:0 -19px;padding:12px 19px;gap:8px;font-size:9px}
|
|
.status {display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--success);white-space:nowrap}
|
|
.status::before {content:"";width:5px;height:5px;background:currentColor;border-radius:50%;flex:none}
|
|
.status.warning {color:var(--warning)}
|
|
.status.danger {color:var(--danger)}
|
|
.status.neutral {color:#939daf}
|
|
.card-footer .text-button {font-size:10px;color:#78869f}
|
|
.card-footer .text-button:hover {color:var(--accent)}
|
|
.card-footer .text-button svg {width:12px;height:12px}
|
|
.collection-foot {display:flex;justify-content:space-between;align-items:center;margin-top:18px;color:#a0a8b9;font-size:10px;gap:12px}
|
|
.collection-foot button {font-size:10px}
|
|
.right-rail {display:grid;gap:20px;padding-top:1px}
|
|
.panel {border:1px solid var(--border);background:white;border-radius:11px;overflow:hidden}
|
|
.panel-heading {display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px}
|
|
.panel-heading h2 {font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
|
|
.panel-heading svg {width:15px;height:15px;color:#8b95b0}
|
|
.calendar-toolbar {display:flex;justify-content:space-between;align-items:center;padding:0 18px 14px}
|
|
.calendar-toolbar strong {font-size:12px;font-weight:550}
|
|
.calendar-controls {display:flex;gap:3px}
|
|
.calendar-controls .icon-button {padding:4px;border:1px solid #edf0f6;border-radius:5px}
|
|
.calendar-controls svg {width:12px;height:12px}
|
|
.calendar-grid {display:grid;grid-template-columns:repeat(7,1fr);padding:0 12px 16px;row-gap:4px}
|
|
.weekday {text-align:center;font-size:9px;color:#a2aabc;line-height:25px;margin-bottom:3px}
|
|
.calendar-day {height:30px;font-size:10px;color:#66738d;position:relative;margin:0 2px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
|
|
.calendar-day.other {color:#c4cada}
|
|
.calendar-day:hover {background:#f2f4ff}
|
|
.calendar-day.today {background:var(--accent);color:white;box-shadow:0 2px 4px #5360ea20}
|
|
.calendar-day.selected:not(.today) {background:var(--accent-soft);box-shadow:inset 0 0 0 1px #cfd5ff;color:var(--accent)}
|
|
.calendar-day.has-task::after {content:"";width:3px;height:3px;border-radius:50%;background:#e7a047;position:absolute;bottom:3px;left:calc(50% - 1.5px)}
|
|
.calendar-day.today.has-task::after {background:white}
|
|
.calendar-legend {font-size:9px;color:#a0a9ba;border-top:1px solid #eff1f6;padding:11px 18px;display:flex;gap:16px}
|
|
.calendar-legend span {display:flex;align-items:center;gap:5px}
|
|
.legend-dot {width:5px;height:5px;background:var(--accent);border-radius:50%}
|
|
.legend-dot.orange {background:#e7a047}
|
|
.calendar-events {border-top:1px solid #eff1f6;padding:16px 18px}
|
|
.calendar-events h4 {font-size:10px;color:#8995ab;font-weight:500;margin-bottom:13px}
|
|
.calendar-event {display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:0;margin:12px 0}
|
|
.calendar-event:last-child {margin-bottom:0}
|
|
.calendar-event-day {background:#f5f6fc;border:1px solid #eceef6;border-radius:6px;width:32px;height:35px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;color:#717d97;line-height:1.3;font-size:12px;font-weight:650}
|
|
.calendar-event-day small {font-size:7px;font-weight:400;color:#9ea7ba}
|
|
.calendar-event-text {flex:1}
|
|
.calendar-event-text strong {display:block;font-size:11px;font-weight:500}
|
|
.calendar-event-text small {display:block;font-size:10px;color:#7e8ba3;margin-top:4px}
|
|
.calendar-event .icon {width:13px;height:13px;color:#b1b9c9}
|
|
.empty-calendar {font-size:10px;color:#a2aabb;line-height:1.8;padding:5px 0}
|
|
.reminder-panel {background:#fff}
|
|
.reminder-head {padding:18px 18px 12px}
|
|
.reminder-head .reminder-icon {width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#f0f2ff;color:var(--accent);margin-bottom:12px}
|
|
.reminder-head h3 {font-size:12px;font-weight:600;line-height:1.7;margin-bottom:6px}
|
|
.reminder-head p {font-size:11px;color:#7e8ba3;line-height:1.9}
|
|
.channel-line {display:flex;gap:9px;align-items:center;margin:0 18px;padding:11px 0;border-bottom:1px solid #f0f2f7}
|
|
.channel-line:last-of-type {border-bottom:0}
|
|
.channel-symbol {width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:#eaf5fe;color:#4b9acd}
|
|
.channel-symbol.email {background:#f0effe;color:#8a7aca}
|
|
.channel-symbol svg {width:13px;height:13px}
|
|
.channel-line strong {font-size:11px;font-weight:500;flex:1}
|
|
.channel-label {font-size:8px;color:#92a0b6;display:flex;align-items:center;gap:3px}
|
|
.channel-label svg {width:10px;height:10px;color:var(--success)}
|
|
.reminder-panel .panel-actions {display:flex;justify-content:space-between;align-items:center;padding:13px 18px 17px}
|
|
.reminder-panel .text-button {font-size:9px}
|
|
.rail-tip {font-size:9px;color:#a0a9bb;text-align:center;display:flex;justify-content:center;align-items:center;gap:5px;line-height:1.7}
|
|
.rail-tip svg {width:11px;height:11px}
|
|
.page-footer {display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:9px;color:#a5aebf;margin-top:34px;padding-top:17px;border-top:1px solid #e9edf5}
|
|
.page-footer span {display:flex;align-items:center;gap:5px}
|
|
.page-footer svg {width:12px;height:12px}
|
|
.card-list {background:white;border:1px solid var(--border);border-radius:11px;overflow-x:auto}
|
|
.card-list table {width:100%;border-collapse:collapse;min-width:610px}
|
|
th {font-size:10px;font-weight:500;color:#8e99ae;text-align:left;background:#fafbfe;padding:14px 16px;border-bottom:1px solid var(--border)}
|
|
td {font-size:11px;padding:17px 16px;border-bottom:1px solid #eef1f7;white-space:nowrap}
|
|
tr:last-child td {border-bottom:0}
|
|
.list-card-name {display:flex;align-items:center;gap:9px;text-align:left;padding:0}
|
|
.list-card-name strong {font-size:11px;font-weight:550;display:block}
|
|
.list-card-name small {font-size:9px;color:#a0a8bb;display:block;margin-top:4px}
|
|
.empty-state {border:1px dashed #dce2f0;border-radius:12px;padding:55px 20px;background:#ffffff90;text-align:center;grid-column:1/-1}
|
|
.empty-state>.icon {width:36px;height:36px;color:#acb4cd;margin-bottom:15px}
|
|
.empty-state h3 {font-size:14px;font-weight:550;margin-bottom:8px}
|
|
.empty-state p {font-size:11px;color:#98a2b7;line-height:1.9;margin-bottom:20px}
|
|
.section-full {margin-top:8px}
|
|
.task-list {display:grid;gap:12px}
|
|
.task-row {background:white;border:1px solid var(--border);border-radius:10px;padding:19px 21px;display:flex;align-items:center;gap:17px}
|
|
.task-date {flex:none;width:62px;border-right:1px solid var(--border);padding-right:16px;text-align:center;font-size:21px;font-weight:650;color:#5360a5;line-height:1.2}
|
|
.task-date small {display:block;font-size:9px;font-weight:400;color:#9aa3b7;margin-bottom:5px}
|
|
.task-row .provider-mini {width:36px;height:36px;border-radius:9px}
|
|
.task-info {flex:1;min-width:0}
|
|
.task-info h3 {font-size:12px;font-weight:550;margin-bottom:7px}
|
|
.task-info p {font-size:10px;color:#939db2;display:flex;gap:15px;align-items:center;line-height:1.8}
|
|
.task-info p span {display:flex;gap:5px;align-items:center}
|
|
.task-info p svg {width:12px;height:12px}
|
|
.task-row>.status {margin-right:10px}
|
|
.platform-table td {white-space:normal}
|
|
.platform-name-cell {display:flex;gap:10px;align-items:center}
|
|
.platform-initial {width:29px;height:29px;border-radius:8px;background:var(--platform-color);color:white;display:grid;place-items:center;font-weight:650;font-family:Arial;font-size:14px}
|
|
.muted {color:var(--muted)}
|
|
.settings-layout {display:grid;grid-template-columns:minmax(0,1fr) 305px;gap:23px;align-items:start}
|
|
.settings-main {display:grid;gap:19px}
|
|
.settings-panel {padding:25px}
|
|
.settings-panel h2 {font-size:14px;font-weight:600;margin-bottom:7px;display:flex;align-items:center;gap:9px}
|
|
.settings-panel h2 svg {width:17px;height:17px;color:#7e8bb2}
|
|
.settings-panel>p {font-size:11px;color:#98a1b5;line-height:1.8;margin-bottom:23px}
|
|
.settings-channel {border:1px solid var(--border);border-radius:9px;margin-top:13px;padding:17px}
|
|
.settings-channel-head {display:flex;align-items:center;gap:10px}
|
|
.settings-channel-head>div:nth-child(2) {flex:1}
|
|
.settings-channel-head strong {display:block;font-size:12px;font-weight:550}
|
|
.settings-channel-head p {font-size:10px;color:#98a2b6;margin-top:5px}
|
|
.switch {appearance:none;width:31px;height:18px;border-radius:12px;background:#cfd5e3;cursor:pointer;position:relative;flex:none;transition:background .15s;border:0}
|
|
.switch::after {content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;background:white;border-radius:50%;transition:transform .15s;box-shadow:0 1px 3px #0001}
|
|
.switch:checked {background:var(--accent)}
|
|
.switch:checked::after {transform:translateX(13px)}
|
|
.settings-channel .field {margin-top:16px}
|
|
.channel-setup {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 12px;padding:12px 0;border-block:1px solid var(--border);flex-wrap:wrap}
|
|
.channel-setup p {display:flex;align-items:center;gap:7px;line-height:1.7;font-size:11px;color:var(--muted);margin:0;flex:1;min-width:140px}
|
|
.channel-setup p svg {width:14px;height:14px;flex:none}
|
|
.service-config-button {color:var(--accent);border-color:#d4dafb;background:var(--accent-soft);flex:none}
|
|
.config-intro {display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.8;color:#637087;margin-bottom:20px}
|
|
.config-intro svg {width:18px;height:18px;color:var(--accent);flex:none;margin-top:3px}
|
|
.config-check-note {font-size:11px;color:var(--muted);line-height:1.8;margin:18px 0 0}
|
|
.config-clear {color:var(--danger);margin-top:18px}
|
|
.config-feedback {font-size:12px;color:var(--success);padding:12px 14px;border:1px solid #cce5df;background:#f2faf7;border-radius:7px;line-height:1.8;margin-bottom:18px}
|
|
.config-feedback[hidden] {display:none}
|
|
.config-modal .modal-footer {flex-wrap:wrap}
|
|
.fields-grid {display:grid;grid-template-columns:1fr 1fr;gap:18px}
|
|
.field {display:flex;flex-direction:column;gap:8px;min-width:0}
|
|
.field>label,.field-label {font-size:11px;color:#637087;font-weight:500;display:block}
|
|
.field label span {color:#cb6573;margin-left:3px}
|
|
.field input,.field select,.field textarea {width:100%;border:1px solid #e0e5ef;border-radius:7px;background:white;padding:10px 11px;font-size:12px;line-height:1.5;color:var(--ink);min-width:0}
|
|
.field input::placeholder,.field textarea::placeholder {color:#aab2c1}
|
|
.field textarea {resize:vertical;min-height:75px;line-height:1.8}
|
|
.field small {font-size:10px;color:#99a3b7;line-height:1.7}
|
|
.field.wide {grid-column:1/-1}
|
|
.form-divider {border:0;border-top:1px solid var(--border);margin:22px 0}
|
|
.form-section-title {font-size:12px;font-weight:600;margin-bottom:15px;display:flex;justify-content:space-between}
|
|
.offsets {display:flex;flex-wrap:wrap;gap:9px;margin:10px 0 17px}
|
|
.offset-check {display:flex;align-items:center;gap:7px;background:#f6f7fc;border:1px solid #e8ecf5;border-radius:7px;padding:9px 13px;font-size:11px;color:#78869f;cursor:pointer}
|
|
.offset-check:has(input:checked) {background:#eff1ff;border-color:#cfd5ff;color:var(--accent)}
|
|
input[type=checkbox]:not(.switch) {accent-color:var(--accent);width:13px;height:13px;margin:0}
|
|
.checkbox-line {display:flex;gap:9px;align-items:center;font-size:11px;color:#7a879e;line-height:1.7}
|
|
.settings-actions {display:flex;justify-content:flex-end;gap:11px;padding-top:5px}
|
|
.notification-preview {padding:22px;background:#eef1ff;border-color:#e0e5fc}
|
|
.notification-preview h3 {font-size:12px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:7px;color:#616fb7}
|
|
.preview-message {background:white;border-radius:9px;padding:18px;box-shadow:0 3px 10px #5963a108;font-size:11px;line-height:2.1;color:#66748e}
|
|
.preview-message strong {display:flex;align-items:center;gap:6px;color:var(--ink);font-size:12px;margin-bottom:8px}
|
|
.preview-message strong .icon {width:15px;height:15px;color:var(--accent)}
|
|
.preview-message .preview-label {color:#99a4b8;display:inline-block;width:58px}
|
|
.preview-message .preview-instructions {border-top:1px solid #eef0f6;margin-top:9px;padding-top:10px;font-size:10px;line-height:1.9}
|
|
.preview-message .preview-link {display:block;text-align:center;color:var(--accent);background:#f2f4ff;border:1px solid #e5e9fc;padding:7px 10px;border-radius:6px;margin-top:15px;font-size:10px}
|
|
.preview-note {font-size:10px;color:#8995b7;line-height:1.9;margin-top:15px}
|
|
.overlay-backdrop {position:fixed;inset:0;background:#222c4657;backdrop-filter:blur(3px);z-index:100;display:flex;justify-content:center;align-items:center;padding:24px;animation:backdrop-in .15s ease}
|
|
.modal {background:white;border-radius:15px;width:570px;max-width:100%;max-height:calc(100dvh - 48px);display:flex;flex-direction:column;box-shadow:0 16px 80px #1d29402b;overflow:hidden;animation:modal-in .18s ease}
|
|
.modal.small {width:440px}
|
|
.modal-header {padding:23px 25px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:15px;border-bottom:1px solid #edf0f6}
|
|
.modal-header h2 {font-size:17px;font-weight:600;margin-bottom:6px}
|
|
.modal-header p {font-size:10px;color:#98a2b6;line-height:1.8}
|
|
.modal-header .icon-button {padding:3px}
|
|
.modal-body {padding:24px 25px;overflow-y:auto}
|
|
.modal-footer {border-top:1px solid var(--border);padding:17px 25px;display:flex;align-items:center;justify-content:flex-end;gap:9px;background:#fcfcfe}
|
|
.form-error {font-size:11px;color:var(--danger);padding:10px 12px;border:1px solid #f0d2d8;background:#fff5f7;border-radius:6px;margin-bottom:16px;line-height:1.8}
|
|
.form-error[hidden] {display:none}
|
|
.calculation-preview {background:#f2f4ff;border:1px solid #e3e7ff;border-radius:8px;padding:13px 15px;margin-top:18px;font-size:11px;color:#7c88ac;display:flex;justify-content:space-between;gap:12px}
|
|
.calculation-preview strong {color:var(--accent);font-size:12px;font-weight:600;white-space:nowrap}
|
|
.completion-summary {display:flex;align-items:center;gap:12px;border-radius:9px;padding:15px;background:#f7f8fc;margin-bottom:20px}
|
|
.completion-summary h3 {font-size:12px;font-weight:600;margin-bottom:5px}
|
|
.completion-summary p {font-size:10px;color:#92a0b7}
|
|
.instructions-box {font-size:11px;color:#7b889f;line-height:1.9;padding:13px 15px;background:#f9fafc;border-left:2px solid #d7def3;margin-bottom:20px;border-radius:0 6px 6px 0}
|
|
.drawer-backdrop {justify-content:flex-end;padding:0}
|
|
.drawer {width:525px;max-width:100%;height:100dvh;background:white;display:flex;flex-direction:column;box-shadow:-10px 0 50px #1c28421a;animation:drawer-in .2s ease;overflow:hidden}
|
|
.drawer .modal-header {padding:22px 27px;align-items:center}
|
|
.drawer .modal-body {padding:26px 27px}
|
|
.detail-brand {display:flex;align-items:center;gap:13px;margin-bottom:24px}
|
|
.detail-brand .provider-logo {width:51px;height:53px;font-size:30px;border-radius:13px}
|
|
.detail-brand h2 {font-size:18px;font-weight:600;margin-bottom:8px}
|
|
.detail-brand p {font-size:11px;color:#8f9ab1;display:flex;align-items:center;gap:8px}
|
|
.detail-grid {display:grid;grid-template-columns:1fr 1fr;gap:19px;background:#f8f9fc;border-radius:10px;padding:18px;margin-bottom:24px}
|
|
.detail-grid dt {font-size:10px;color:#98a2b7;margin-bottom:6px}
|
|
.detail-grid dd {margin:0;font-size:12px;color:#57667e;font-variant-numeric:tabular-nums;line-height:1.8}
|
|
.detail-section {border-top:1px solid var(--border);padding-top:23px;margin-top:23px}
|
|
.detail-section .section-header {margin-bottom:14px}
|
|
.detail-section h3 {font-size:13px;font-weight:550}
|
|
.detail-rule {border:1px solid var(--border);border-radius:9px;padding:15px;margin:10px 0}
|
|
.detail-rule-head {display:flex;align-items:center;gap:8px;margin-bottom:10px}
|
|
.detail-rule-head>.icon {width:16px;height:16px;color:var(--accent)}
|
|
.detail-rule-head strong {font-size:11px;font-weight:550;flex:1}
|
|
.detail-rule-head span {font-size:10px;color:#99a4b8}
|
|
.detail-rule>p {font-size:10px;color:#94a0b6;line-height:1.9;margin-bottom:12px}
|
|
.detail-rule-bottom {display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;color:#8592ad}
|
|
.detail-rule-bottom>div:last-child {display:flex;gap:10px}
|
|
.detail-platform {display:flex;align-items:center;gap:9px;border-bottom:1px solid #f0f2f7;padding:12px 0}
|
|
.detail-platform:last-child {border:0}
|
|
.detail-platform>div:nth-child(2) {flex:1;min-width:0}
|
|
.detail-platform strong {display:block;font-size:11px;font-weight:500}
|
|
.detail-platform p {font-size:9px;color:#99a4b8;line-height:1.7;margin-top:3px;overflow-wrap:anywhere}
|
|
.detail-platform .icon-button svg {width:14px;height:14px}
|
|
.history-item {border-left:2px solid #e4e8fc;padding:0 0 18px 14px;position:relative}
|
|
.history-item::before {content:"";position:absolute;width:6px;height:6px;border:2px solid white;background:#adb7ec;border-radius:50%;left:-5px;top:0;box-sizing:content-box}
|
|
.history-item strong {font-size:10px;font-weight:500}
|
|
.history-item p {font-size:9px;color:#95a1b6;line-height:1.8;margin-top:5px}
|
|
.detail-note {font-size:11px;color:#8793aa;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}
|
|
.help-copy {font-size:12px;color:#7d8ba3;line-height:2}
|
|
.help-copy h3 {font-size:13px;font-weight:600;color:#475570;margin:17px 0 5px}
|
|
.help-copy h3:first-child {margin-top:0}
|
|
.help-copy ul {padding-left:19px;margin:6px 0 15px}
|
|
.account-option {border:1px solid var(--border);border-radius:9px;display:flex;align-items:center;gap:12px;width:100%;padding:14px;text-align:left;margin:10px 0}
|
|
.account-option.active {background:var(--accent-soft);border-color:#d5dbff}
|
|
.account-option>div:nth-child(2) {flex:1}
|
|
.account-option strong {font-size:12px;font-weight:550}
|
|
.account-option p {font-size:10px;color:#97a2b7;margin-top:5px}
|
|
.account-option>.icon {width:17px;height:17px;color:var(--accent)}
|
|
.account-note {font-size:10px;color:#99a3b7;line-height:1.9;margin-top:20px}
|
|
#toast-root {position:fixed;left:calc(50% + 111px);bottom:30px;transform:translateX(-50%);z-index:200;max-width:calc(100% - 32px)}
|
|
.toast {display:flex;align-items:center;gap:9px;background:#28334a;color:white;padding:13px 20px;border-radius:9px;box-shadow:0 8px 30px #1d27402b;font-size:12px;line-height:1.7;animation:modal-in .18s ease}
|
|
.toast svg {width:16px;height:16px;color:#9ad7c6}
|
|
.toast.error svg {color:#ffb6c4}
|
|
.body-overlay {overflow:hidden}
|
|
@keyframes backdrop-in {from{opacity:0}to{opacity:1}}
|
|
@keyframes modal-in {from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
|
|
@keyframes drawer-in {from{transform:translateX(30px);opacity:.5}to{transform:translateX(0);opacity:1}}
|
|
@media (min-width:1650px) {
|
|
.card-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
|
|
.workspace-grid {grid-template-columns:minmax(0,1fr) 292px}
|
|
}
|
|
@media (max-width:1250px) {
|
|
.app-shell {grid-template-columns:195px minmax(0,1fr)}
|
|
.sidebar {width:195px;padding-inline:12px}
|
|
.brand {margin-inline:13px}
|
|
.content {padding:26px 25px}
|
|
.topbar {padding-inline:25px}
|
|
.workspace-grid {grid-template-columns:minmax(0,1fr) 250px;gap:19px}
|
|
.card-grid {gap:13px}
|
|
.sim-card {padding-inline:15px}
|
|
.card-footer {margin-inline:-15px;padding-inline:15px}
|
|
.card-top {gap:8px}
|
|
.card-heading h3 {font-size:11px}
|
|
.card-number {font-size:13px}
|
|
.provider-logo {width:33px;height:35px;border-radius:8px;font-size:20px}
|
|
.card-rule {padding-inline:9px}
|
|
.card-rule-name {gap:4px;font-size:9px}
|
|
.card-rule-name span {font-size:8px}
|
|
.card-rule-date {font-size:9px}
|
|
.renewal-pills {gap:9px}
|
|
.renewal-pill:nth-child(3) {display:none}
|
|
.stat {padding-inline:20px}
|
|
.section-controls {gap:6px}
|
|
.segmented button {padding-inline:8px}
|
|
#toast-root {left:calc(50% + 97px)}
|
|
}
|
|
@media (max-width:1060px) {
|
|
.app-shell {grid-template-columns:80px minmax(0,1fr)}
|
|
.sidebar {width:80px;padding:28px 10px 19px;align-items:center}
|
|
.brand {margin:0 0 35px}
|
|
.brand-name,.nav-caption,.nav-button>span,.sidebar-note,.user-text,.sidebar-user>.icon {display:none}
|
|
.nav-list {width:100%;gap:12px}
|
|
.nav-button {padding:13px;justify-content:center}
|
|
.nav-button .icon {width:21px;height:21px}
|
|
.nav-button.active::before {top:15px;bottom:15px}
|
|
.sidebar-user {justify-content:center;padding-top:20px}
|
|
.topbar {height:70px}
|
|
.content {padding:25px}
|
|
.workspace-grid {grid-template-columns:minmax(0,1fr) 245px;gap:19px}
|
|
.settings-layout {grid-template-columns:minmax(0,1fr) 265px}
|
|
.settings-panel {padding:20px}
|
|
#toast-root {left:calc(50% + 40px)}
|
|
}
|
|
@media (max-width:890px) {
|
|
.workspace-grid {grid-template-columns:minmax(0,1fr)}
|
|
.right-rail {grid-template-columns:1fr 1fr;align-items:start;margin-top:10px}
|
|
.rail-tip {grid-column:1/-1}
|
|
.card-grid {gap:17px}
|
|
.sim-card {padding:19px 19px 0}
|
|
.card-footer {margin-inline:-19px;padding-inline:19px}
|
|
.card-heading h3 {font-size:12px}
|
|
.card-number {font-size:15px}
|
|
.card-rule-name {font-size:10px}
|
|
.card-rule-name span {font-size:9px}
|
|
.card-rule-date {font-size:10px}
|
|
.provider-logo {width:39px;height:40px;font-size:22px}
|
|
.renewal-pill:nth-child(3) {display:flex}
|
|
.renewal-intro {min-width:105px}
|
|
.renewal-strip {gap:13px;padding-inline:17px}
|
|
.renewal-strip>.text-button {font-size:0;gap:0}
|
|
.renewal-strip>.text-button svg {width:15px;height:15px}
|
|
.global-search {width:220px}
|
|
.stat {padding-inline:18px}
|
|
.stat-foot {font-size:9px}
|
|
.settings-layout {grid-template-columns:1fr}
|
|
.notification-preview {max-width:460px}
|
|
.task-row {gap:13px;padding:17px}
|
|
.task-row>.status {margin-right:0}
|
|
}
|
|
@media (max-width:680px) {
|
|
.app-shell {display:block}
|
|
.sidebar {transform:translateX(-100%);visibility:hidden;width:222px;padding:28px 17px 18px;align-items:stretch;transition:transform .2s;z-index:70;box-shadow:none}
|
|
.sidebar.open {transform:translateX(0);visibility:visible;box-shadow:8px 0 45px #20305010}
|
|
.sidebar.open .brand {margin:0 15px 35px}
|
|
.sidebar.open .brand-name,.sidebar.open .nav-caption,.sidebar.open .nav-button>span,.sidebar.open .sidebar-note,.sidebar.open .user-text {display:block}
|
|
.sidebar.open .nav-button {justify-content:flex-start;padding:12px 18px}
|
|
.sidebar.open .nav-list {gap:7px}
|
|
.sidebar.open .sidebar-user {justify-content:flex-start}
|
|
.menu-scrim {position:fixed;inset:0;background:#25304a4a;z-index:60}
|
|
.topbar {height:62px;padding:0 18px;gap:8px}
|
|
.mobile-menu {display:flex;padding:5px;margin-left:-5px}
|
|
.breadcrumbs {font-size:11px;gap:8px;flex:1}
|
|
.breadcrumbs>span:first-child,.breadcrumbs>.icon {display:none}
|
|
.topbar-right {gap:11px}
|
|
.global-search {width:155px;padding:7px 9px;gap:5px}
|
|
.global-search input {font-size:10px}
|
|
.global-search kbd,.topbar-divider,.topbar-avatar>.icon {display:none}
|
|
.notification-button {padding:4px}
|
|
.topbar-avatar .avatar {width:28px;height:28px;font-size:10px}
|
|
.content {padding:25px 19px 24px}
|
|
.page-heading {align-items:flex-start;gap:10px;margin-bottom:21px;flex-wrap:wrap}
|
|
.heading-title {gap:8px;margin-bottom:7px}
|
|
h1 {font-size:24px}
|
|
.page-heading p {font-size:11px;max-width:320px}
|
|
.heading-actions {gap:7px;margin-top:7px}
|
|
.heading-actions .btn {font-size:11px;padding:9px 12px}
|
|
.stat-strip {grid-template-columns:1fr 1fr;padding:0;margin-bottom:18px;overflow:hidden}
|
|
.stat {padding:17px 19px;border-right:0}
|
|
.stat:nth-child(odd) {border-right:1px solid var(--border)}
|
|
.stat:nth-child(-n+2) {border-bottom:1px solid var(--border)}
|
|
.stat-value {font-size:28px}
|
|
.stat-foot {margin-top:6px;font-size:9px}
|
|
.renewal-strip {padding:15px;gap:11px;flex-wrap:wrap;margin-bottom:24px}
|
|
.renewal-strip-icon {width:32px;height:32px;border-radius:8px}
|
|
.renewal-strip-icon .icon {width:17px;height:17px}
|
|
.renewal-intro {flex:1}
|
|
.renewal-strip>.text-button {position:absolute;top:20px;right:15px;font-size:10px;gap:4px}
|
|
.renewal-pills {flex-basis:100%;justify-content:flex-start;border-top:1px solid #dfe4fb;padding-top:13px;margin-top:1px;gap:16px}
|
|
.renewal-pill {flex:1;gap:7px}
|
|
.renewal-pill .provider-mini {width:26px;height:26px;font-size:14px;flex:none}
|
|
.renewal-pill strong {font-size:9px;max-width:80px}
|
|
.renewal-pill small {font-size:8px;margin-top:3px}
|
|
.renewal-pill:nth-child(3) {display:none}
|
|
.section-header {gap:8px;margin-bottom:15px;flex-wrap:wrap}
|
|
.section-title {font-size:14px;gap:7px}
|
|
.section-controls {margin-left:auto;gap:6px}
|
|
.segmented button {font-size:9px;padding:5px 8px}
|
|
.segmented button span {display:none}
|
|
.view-toggle button {padding:5px}
|
|
.card-grid {grid-template-columns:1fr;gap:14px}
|
|
.card-top {gap:11px;margin-bottom:16px}
|
|
.card-heading h3 {font-size:13px}
|
|
.card-heading p {font-size:10px}
|
|
.card-number {font-size:17px;margin-bottom:9px}
|
|
.card-meta {font-size:10px;margin-bottom:17px}
|
|
.card-rule {padding:13px 12px;margin-bottom:16px}
|
|
.card-rule-name {font-size:11px}
|
|
.card-rule-name span {font-size:10px;margin-left:2px}
|
|
.card-rule-date {font-size:11px}
|
|
.platform-label {font-size:10px}
|
|
.platform-tag {font-size:9px;padding:4px 7px}
|
|
.card-footer {padding-block:14px}
|
|
.card-footer .status,.card-footer .text-button {font-size:10px}
|
|
.right-rail {grid-template-columns:1fr;margin-top:15px;gap:17px}
|
|
.calendar-grid {row-gap:5px;padding-inline:17px}
|
|
.calendar-day {height:35px;font-size:12px;margin-inline:3px}
|
|
.weekday {font-size:10px}
|
|
.calendar-events {padding-bottom:20px}
|
|
.panel-heading h2 {font-size:14px}
|
|
.calendar-toolbar strong {font-size:13px}
|
|
.page-footer {font-size:8px;align-items:flex-start;line-height:1.8;margin-top:26px}
|
|
.page-footer>span:last-child {max-width:145px;text-align:right}
|
|
.task-row {flex-wrap:wrap;padding:16px;gap:12px}
|
|
.task-date {width:45px;padding-right:11px;font-size:18px}
|
|
.task-row .provider-mini {width:30px;height:30px}
|
|
.task-info {flex-basis:calc(100% - 104px)}
|
|
.task-info h3 {font-size:11px}
|
|
.task-info p {font-size:9px;gap:8px;flex-wrap:wrap}
|
|
.task-row>.status {margin-left:57px;flex:1}
|
|
.task-row>.btn {font-size:10px;padding:7px 10px}
|
|
.fields-grid {gap:16px}
|
|
.settings-panel {padding:20px 17px}
|
|
.settings-panel>.fields-grid {grid-template-columns:1fr}
|
|
.offset-check {padding:8px 10px}
|
|
.overlay-backdrop {padding:14px}
|
|
.modal {max-height:calc(100dvh - 28px);border-radius:12px}
|
|
.modal-header {padding:20px 20px 16px}
|
|
.modal-header h2 {font-size:16px}
|
|
.modal-body {padding:21px 20px}
|
|
.modal-footer {padding:15px 20px}
|
|
.modal .fields-grid {gap:14px}
|
|
.field input,.field select,.field textarea {font-size:13px}
|
|
.drawer-backdrop {padding:0}
|
|
.drawer .modal-header {padding:20px}
|
|
.drawer .modal-body {padding:23px 20px}
|
|
#toast-root {left:50%;bottom:22px;width:max-content}
|
|
.toast {font-size:11px;padding:12px 16px}
|
|
}
|
|
@media (max-width:370px) {
|
|
.content {padding-inline:15px}
|
|
.topbar {padding-inline:15px}
|
|
.global-search {width:110px}
|
|
.topbar-right {gap:8px}
|
|
.breadcrumbs strong {font-size:10px}
|
|
.segmented button {padding-inline:6px}
|
|
.modal .fields-grid {grid-template-columns:1fr}
|
|
.field.wide {grid-column:auto}
|
|
.stat {padding-inline:16px}
|
|
}
|
|
@media (prefers-reduced-motion:reduce) {
|
|
*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
|
|
}
|