:root {
  --navy:#0a2a4a;
  --navy-deep:#061a30;
  --navy-mid:#123a63;
  --accent:#1a6fb5;
  --accent-soft:#e8f2fb;
  --bg:#f3f5f8;
  --card:#fff;
  --text:#1a2332;
  --muted:#6b7785;
  --line:#e3e8ef;
  --danger:#e23b3b;
  --ok:#1f8a4c;
  --warn:#c47a00;
  --shadow:0 8px 24px #0a2a4a14;
  --radius:14px;
  --font:"Noto Sans SC", "Source Sans 3", system-ui, sans-serif;
}

* {
  box-sizing:border-box;
}

html,body,#root,#app {
  min-height:100%;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  margin:0;
}

button,input,select,textarea {
  font:inherit;
}

button {
  cursor:pointer;
  background:0 0;
  border:none;
}

a {
  color:inherit;
  text-decoration:none;
}

.app-shell {
  flex-direction:column;
  min-height:100vh;
  display:flex;
}

.topbar {
  background:var(--navy-deep);
  color:#fff;
  z-index:50;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:12px 20px;
  display:flex;
  position:sticky;
  top:0;
}

.topbar-brand {
  letter-spacing:.02em;
  align-items:center;
  gap:10px;
  font-weight:700;
  display:flex;
}

.topbar-brand small {
  opacity:.7;
  margin-left:8px;
  font-weight:400;
}

.mode-switch {
  background:#ffffff1a;
  border-radius:999px;
  padding:3px;
  display:flex;
}

.mode-switch button {
  color:#ffffffbf;
  border-radius:999px;
  padding:8px 16px;
  font-weight:500;
  transition:all .2s;
}

.mode-switch button.active {
  color:var(--navy);
  background:#fff;
}

.topbar-actions {
  align-items:center;
  gap:8px;
  display:flex;
}

.ghost-btn {
  color:#fff;
  border:1px solid #ffffff40;
  border-radius:8px;
  padding:7px 12px;
  font-size:13px;
}

.ghost-btn:hover {
  background:#ffffff14;
}

.stage {
  flex:1;
  justify-content:center;
  padding:28px 16px 48px;
  display:flex;
}

.toast {
  color:#fff;
  z-index:100;
  background:#061a30eb;
  border-radius:10px;
  padding:12px 18px;
  font-size:14px;
  animation:.25s fadeUp;
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translate(-50%);
}

@keyframes fadeUp {
0% {
  opacity:0;
  transform:translate(-50%,8px);
}
to {
  opacity:1;
  transform:translate(-50%);
}
}

.phone-frame {
  background:#111;
  border-radius:36px;
  width:390px;
  max-width:100%;
  height:780px;
  padding:12px;
  position:relative;
  box-shadow:0 24px 60px #061a3047;
}

.phone-notch {
  z-index:5;
  background:#000;
  border-radius:14px;
  width:110px;
  height:24px;
  position:absolute;
  top:18px;
  left:50%;
  transform:translate(-50%);
}

.phone-screen {
  background:var(--bg);
  border-radius:28px;
  flex-direction:column;
  height:100%;
  display:flex;
  position:relative;
  overflow:hidden;
}

.status-bar {
  color:#fff;
  z-index:4;
  background:0 0;
  justify-content:space-between;
  padding:12px 18px 4px;
  font-size:12px;
  font-weight:600;
  display:flex;
  position:absolute;
  top:0;
  left:0;
  right:0;
}

.status-bar.dark {
  color:var(--text);
}

.mini-body {
  -webkit-overflow-scrolling:touch;
  flex:1;
  overflow:auto;
}

.nav-bar {
  border-bottom:1px solid var(--line);
  z-index:3;
  background:#fff;
  grid-template-columns:40px 1fr minmax(40px,auto);
  align-items:center;
  padding:44px 12px 10px;
  display:grid;
  position:sticky;
  top:0;
}

.nav-bar h1 {
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin:0;
  padding:0 4px;
  font-size:16px;
  font-weight:600;
  overflow:hidden;
}

.nav-bar>:last-child {
  justify-content:flex-end;
  justify-self:end;
  min-width:40px;
  display:flex;
}

.nav-back {
  width:36px;
  height:36px;
  color:var(--navy);
  border-radius:50%;
  place-items:center;
  font-size:20px;
  display:grid;
}

.page-pad {
  padding:14px 14px 28px;
}

.card {
  background:var(--card);
  border-radius:var(--radius);
  border:1px solid var(--line);
  margin-bottom:12px;
  padding:14px;
}

.card h3 {
  margin:0 0 8px;
  font-size:15px;
}

.muted {
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.btn-primary {
  background:var(--navy);
  color:#fff;
  border-radius:999px;
  width:100%;
  padding:12px 18px;
  font-weight:600;
  transition:transform .15s,background .15s;
}

.btn-primary:hover {
  background:var(--navy-mid);
}

.btn-primary:active {
  transform:scale(.98);
}

.btn-primary:disabled {
  opacity:.45;
  cursor:not-allowed;
}

.btn-outline {
  color:var(--navy);
  border:1.5px solid var(--navy);
  background:#fff;
  border-radius:999px;
  padding:11px 18px;
  font-weight:600;
}

.btn-row {
  gap:10px;
  margin-top:8px;
  display:flex;
}

.btn-row .btn-outline {
  flex:1;
}

.btn-row .btn-primary {
  flex:1.4;
}

.chip-grid {
  flex-wrap:wrap;
  gap:8px;
  display:flex;
}

.chip {
  border:1px solid var(--line);
  color:var(--text);
  background:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-size:13px;
  transition:all .15s;
}

.chip.active {
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--navy);
  font-weight:600;
}

.field {
  margin-bottom:14px;
}

.field label {
  margin-bottom:6px;
  font-size:13px;
  font-weight:600;
  display:block;
}

.field input,.field select,.field textarea {
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  outline:none;
  width:100%;
  padding:11px 12px;
}

.field input:focus,.field select:focus,.field textarea:focus {
  border-color:var(--accent);
}

.field-row {
  grid-template-columns:1fr 1fr;
  gap:10px;
  display:grid;
}

.check-row {
  border-bottom:1px solid var(--line);
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  display:flex;
}

.check-row:last-child {
  border-bottom:none;
}

.check-box {
  background:#fff;
  border:1.5px solid #c5ced8;
  border-radius:5px;
  flex-shrink:0;
  place-items:center;
  width:20px;
  height:20px;
  margin-top:1px;
  display:grid;
}

.check-box.on {
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
  font-size:12px;
}

.badge {
  background:var(--accent-soft);
  color:var(--navy-mid);
  border-radius:999px;
  align-items:center;
  padding:2px 8px;
  font-size:11px;
  font-weight:600;
  display:inline-flex;
}

.badge.gray {
  color:var(--muted);
  background:#eef1f5;
}

.badge.red {
  color:var(--danger);
  background:#fde8e8;
}

.dot {
  background:var(--danger);
  border-radius:50%;
  width:8px;
  height:8px;
  position:absolute;
}

.home-hero {
  color:#fff;
  background:radial-gradient(80% 50% at 100% -10%,#1a6fb573,#0000 55%),radial-gradient(60% 40% at -10% 30%,#0f3a6699,#0000 50%),linear-gradient(165deg,#061a30 0%,#0a2a4a 42%,#123a63 100%);
  min-height:100%;
  padding:10px 14px 18px;
}

.home-topbar {
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  padding:0 2px;
  display:flex;
}

.home-greeting {
  letter-spacing:.08em;
  opacity:.65;
  font-size:12px;
}

.home-bell {
  color:#fff;
  background:#ffffff1a;
  border:1px solid #ffffff24;
  border-radius:10px;
  width:32px;
  height:32px;
  font-size:12px;
  font-weight:700;
  position:relative;
}

.home-bell .dot {
  top:4px;
  right:4px;
}

.brand-block {
  text-align:center;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  background:#ffffff0a;
  border:1px solid #ffffff38;
  border-radius:16px;
  margin-bottom:12px;
  padding:20px 16px 18px;
  animation:.5s softIn;
  box-shadow:inset 0 1px #ffffff14;
}

@keyframes softIn {
0% {
  opacity:0;
  transform:translateY(8px);
}
to {
  opacity:1;
  transform:none;
}
}

.logo-mark {
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  letter-spacing:.02em;
  background:#ffffff1a;
  border:1.5px solid #ffffff8c;
  place-items:center;
  width:52px;
  height:52px;
  margin:0 auto 12px;
  font-size:18px;
  font-weight:700;
  display:grid;
}

.brand-block h2 {
  letter-spacing:.12em;
  margin:0;
  font-size:28px;
  font-weight:700;
}

.brand-block p {
  opacity:.78;
  margin:8px 0 0;
  font-size:11px;
  line-height:1.45;
}

.brand-block .en {
  letter-spacing:.22em;
  opacity:.5;
  margin-top:10px;
  font-family:"Source Sans 3",sans-serif;
  font-size:10px;
}

.banner {
  background:linear-gradient(125deg,#1a6fb573,#061a3033),#ffffff0f;
  border:1px solid #ffffff29;
  border-radius:14px;
  height:108px;
  margin-bottom:12px;
  position:relative;
  overflow:hidden;
}

.banner-slide {
  opacity:0;
  background-color:#0a2a4a;
  background-position:50%;
  background-size:cover;
  transition:opacity .5s;
  position:absolute;
  inset:0;
}

.banner-slide.active {
  opacity:1;
}

.banner-shade {
  background:linear-gradient(100deg,#061a30b8 0%,#061a3059 55%,#061a3026 100%);
  position:absolute;
  inset:0;
}

.banner-copy {
  z-index:1;
  color:#fff;
  flex-direction:column;
  justify-content:flex-end;
  height:100%;
  padding:16px 16px 20px;
  display:flex;
  position:relative;
}

.banner-kicker {
  letter-spacing:.12em;
  opacity:.65;
  margin-bottom:4px;
  font-size:10px;
  font-style:normal;
}

.banner-slide strong,.banner-copy strong {
  letter-spacing:.02em;
  font-size:18px;
}

.banner-slide span,.banner-copy span {
  opacity:.78;
  margin-top:4px;
  font-size:12px;
}

.banner-dots {
  gap:5px;
  display:flex;
  position:absolute;
  bottom:10px;
  right:12px;
}

.banner-dots i {
  background:#ffffff4d;
  border-radius:50%;
  width:6px;
  height:6px;
  transition:background .2s,width .2s;
}

.banner-dots i.on {
  background:#fff;
  border-radius:999px;
  width:14px;
}

.notice {
  opacity:.95;
  background:#ffffff14;
  border:1px solid #ffffff1a;
  border-radius:12px;
  align-items:flex-start;
  gap:8px;
  margin-bottom:14px;
  padding:10px 12px;
  font-size:12px;
  line-height:1.5;
  display:flex;
}

.notice-tag {
  color:#9fd0ff;
  background:#9fd0ff33;
  border-radius:6px;
  flex-shrink:0;
  padding:2px 7px;
  font-size:10px;
  font-weight:700;
}

.home-section-label {
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:8px;
  padding:0 2px;
  display:flex;
}

.home-section-label strong {
  letter-spacing:.04em;
  font-size:13px;
}

.home-section-label span {
  opacity:.5;
  font-size:11px;
}

.service-grid {
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
  display:grid;
}

.service-tile {
  color:#fff;
  text-align:left;
  background-position:50%;
  background-size:cover;
  border:1px solid #ffffff24;
  border-radius:14px;
  flex-direction:column;
  align-items:flex-start;
  min-height:108px;
  padding:12px;
  transition:transform .2s,border-color .2s;
  display:flex;
  position:relative;
  overflow:hidden;
}

.service-tile:hover,.service-tile:active {
  border-color:#ffffff47;
  transform:translateY(-2px);
}

.service-tile:before {
  content:"";
  background:linear-gradient(165deg,#ffffff14,#0000 40%,#061a308c);
  position:absolute;
  inset:0;
}

.service-tile>* {
  z-index:1;
  position:relative;
}

.service-ico {
  background:#ffffff29;
  border:1px solid #fff3;
  border-radius:8px;
  place-items:center;
  width:28px;
  height:28px;
  margin-bottom:14px;
  font-size:12px;
  font-weight:700;
  display:grid;
}

.service-tile strong {
  margin-top:auto;
  font-size:15px;
  display:block;
}

.service-tile span:last-child {
  opacity:.78;
  margin-top:4px;
  font-size:11px;
  line-height:1.35;
}

.tile-0 {
  background-image:linear-gradient(145deg,#2a6aa0,#0d2d4d);
}

.tile-1 {
  background-image:linear-gradient(145deg,#2f7399,#123652);
}

.tile-2 {
  background-image:linear-gradient(145deg,#1f7a8a,#0c3348);
}

.tile-3 {
  background-image:linear-gradient(145deg,#3a628c,#142844);
}

.home-cta {
  margin-bottom:10px;
}

.home-cta-btn {
  letter-spacing:.06em;
  background:linear-gradient(#2a86cf,#1a6fb5);
  border-radius:14px;
  padding:14px;
  font-size:15px;
  box-shadow:0 8px 20px #1a6fb559;
}

.home-cta-btn:active {
  transform:scale(.99);
}

.home-secondary {
  grid-template-columns:1fr 1fr;
  gap:10px;
  display:grid;
}

.home-secondary button {
  color:var(--navy);
  background:#fff;
  border-radius:14px;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:12px 10px;
  font-size:14px;
  font-weight:600;
  display:flex;
  position:relative;
}

.home-sec-ico {
  background:var(--accent-soft);
  width:24px;
  height:24px;
  color:var(--navy);
  border-radius:7px;
  place-items:center;
  font-size:11px;
  font-weight:700;
  display:grid;
}

.home-secondary .dot {
  top:8px;
  right:10px;
}

.fee-line {
  border-bottom:1px dashed var(--line);
  justify-content:space-between;
  padding:8px 0;
  font-size:14px;
  display:flex;
}

.fee-total {
  color:var(--navy);
  justify-content:space-between;
  margin-top:10px;
  font-size:18px;
  font-weight:700;
  display:flex;
}

.module-grid {
  grid-template-columns:1fr 1fr;
  gap:10px;
  display:grid;
}

.module-tile {
  border:1px solid var(--line);
  text-align:center;
  background:#fff;
  border-radius:14px;
  padding:22px 12px;
  transition:border-color .15s;
  position:relative;
}

.module-tile:hover {
  border-color:var(--accent);
}

.module-tile .icon {
  background:var(--accent-soft);
  width:40px;
  height:40px;
  color:var(--navy);
  border-radius:10px;
  place-items:center;
  margin:0 auto 8px;
  font-size:18px;
  font-weight:700;
  display:grid;
}

.module-tile .count {
  background:var(--danger);
  color:#fff;
  border-radius:999px;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 4px;
  font-size:11px;
  display:grid;
  position:absolute;
  top:10px;
  right:12px;
}

.module-tile .count.gray {
  background:#c5ced8;
}

.empty-state {
  text-align:center;
  color:var(--muted);
  padding:48px 20px;
}

.empty-state .emoji {
  opacity:.5;
  margin-bottom:12px;
  font-size:40px;
}

.list-item {
  border-bottom:1px solid var(--line);
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:12px 0;
  display:flex;
}

.list-item:last-child {
  border-bottom:none;
}

.sticky-footer {
  border-top:1px solid var(--line);
  background:#fff;
  padding:12px 14px 18px;
  position:sticky;
  bottom:0;
}

.admin-wrap {
  background:#f4f6f9;
  border:1px solid #0a2a4a14;
  border-radius:18px;
  grid-template-columns:232px 1fr;
  width:min(1240px,100%);
  min-height:760px;
  display:grid;
  overflow:hidden;
  box-shadow:0 16px 48px #061a301f;
}

.admin-side {
  color:#fff;
  background:linear-gradient(#061a30 0%,#0a2a4a 100%);
  flex-direction:column;
  padding:20px 14px 16px;
  display:flex;
}

.admin-logo {
  border-bottom:1px solid #ffffff14;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  padding:4px 8px 18px;
  display:flex;
}

.admin-logo-mark {
  background:#ffffff1f;
  border:1px solid #fff3;
  border-radius:10px;
  flex-shrink:0;
  place-items:center;
  width:36px;
  height:36px;
  font-size:15px;
  font-weight:700;
  display:grid;
}

.admin-logo strong {
  letter-spacing:.02em;
  font-size:14px;
  display:block;
}

.admin-logo small {
  opacity:.55;
  margin-top:2px;
  font-size:11px;
  display:block;
}

.admin-nav {
  flex:1;
  overflow:auto;
}

.admin-nav-group {
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ffffff59;
  padding:12px 12px 6px;
  font-size:10px;
}

.admin-nav button {
  text-align:left;
  color:#ffffffb8;
  border-radius:10px;
  align-items:center;
  gap:10px;
  width:100%;
  margin-bottom:2px;
  padding:10px 12px;
  font-size:13px;
  transition:background .15s,color .15s;
  display:flex;
}

.admin-nav button .nav-ico {
  opacity:.85;
  background:#ffffff0f;
  border-radius:6px;
  place-items:center;
  width:22px;
  height:22px;
  font-size:11px;
  display:grid;
}

.admin-nav button:hover {
  color:#fff;
  background:#ffffff0f;
}

.admin-nav button.active {
  color:#fff;
  background:#1a6fb559;
  font-weight:600;
  box-shadow:inset 0 0 0 1px #ffffff1f;
}

.admin-nav button.active .nav-ico {
  background:#ffffff29;
}

.admin-side-foot {
  border-top:1px solid #ffffff14;
  margin-top:8px;
  padding-top:12px;
}

.admin-side-link {
  text-align:left;
  color:#ffffff8c;
  border-radius:8px;
  width:100%;
  padding:8px 12px;
  font-size:12px;
}

.admin-side-link:hover {
  color:#fff;
  background:#ffffff0f;
}

.admin-main {
  background:#f4f6f9;
  flex-direction:column;
  min-width:0;
  min-height:760px;
  display:flex;
}

.admin-header {
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  background:#ffffffeb;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 24px;
  display:flex;
}

.admin-header h2 {
  color:var(--navy);
  margin:0;
  font-size:18px;
  font-weight:700;
}

.admin-header-desc {
  color:var(--muted);
  margin:4px 0 0;
  font-size:12px;
}

.admin-user {
  align-items:center;
  gap:10px;
  display:flex;
}

.admin-avatar {
  background:var(--navy);
  color:#fff;
  border-radius:10px;
  place-items:center;
  width:36px;
  height:36px;
  font-size:14px;
  font-weight:700;
  display:grid;
}

.admin-avatar.sm {
  border-radius:8px;
  width:32px;
  height:32px;
  font-size:13px;
}

.admin-user-meta {
  flex-direction:column;
  line-height:1.25;
  display:flex;
}

.admin-user-meta strong {
  font-size:13px;
}

.admin-user-meta span {
  color:var(--muted);
  font-size:11px;
}

.admin-logout {
  border:1px solid var(--line);
  color:var(--navy);
  background:#fff;
  border-radius:8px;
  margin-left:6px;
  padding:7px 12px;
  font-size:12px;
  font-weight:600;
}

.admin-logout:hover {
  border-color:var(--navy);
}

.admin-content {
  padding:22px 24px 28px;
  overflow:auto;
}

.admin-card {
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:20px 22px;
}

.admin-card.narrow {
  max-width:520px;
}

.admin-card h3 {
  color:var(--navy);
  margin:0;
  font-size:15px;
  font-weight:700;
}

.admin-card-head {
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:16px;
  display:flex;
}

.admin-card-head .muted {
  margin:4px 0 0;
}

.admin-empty {
  text-align:center;
  border:1px dashed var(--line);
  background:#f8fafc;
  border-radius:12px;
  padding:36px 16px;
}

.admin-empty p {
  color:var(--text);
  margin:0 0 6px;
  font-weight:600;
}

.stat-row {
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:16px;
  display:grid;
}

.stat {
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:16px 18px;
  position:relative;
  overflow:hidden;
}

.stat:before {
  content:"";
  background:var(--navy-mid);
  opacity:.35;
  width:3px;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
}

.stat.accent:before {
  background:var(--accent);
  opacity:1;
}

.stat-label {
  color:var(--muted);
  font-size:12px;
  display:block;
}

.stat b {
  color:var(--navy);
  letter-spacing:-.02em;
  margin-top:6px;
  font-size:26px;
  display:block;
}

.stat b small {
  color:var(--muted);
  margin-left:4px;
  font-size:12px;
  font-weight:500;
}

.stat-foot {
  color:var(--muted);
  margin-top:8px;
  font-size:11px;
  display:block;
}

.action-grid {
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  display:grid;
}

.action-tile {
  text-align:left;
  border:1px solid var(--line);
  background:#fbfcfe;
  border-radius:12px;
  padding:14px;
  transition:border-color .15s,background .15s;
}

.action-tile:hover {
  border-color:var(--accent);
  background:#fff;
}

.action-ico {
  background:var(--accent-soft);
  min-width:28px;
  height:28px;
  color:var(--navy);
  border-radius:8px;
  place-items:center;
  margin-bottom:10px;
  padding:0 6px;
  font-size:11px;
  font-weight:700;
  display:inline-grid;
}

.action-tile strong {
  color:var(--text);
  margin-bottom:4px;
  font-size:13px;
  display:block;
}

.action-tile span:last-child {
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}

.form-grid {
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
  margin-bottom:14px;
  display:grid;
}

.form-grid.three {
  grid-template-columns:1fr 1fr 1fr;
}

.table-wrap {
  border:1px solid var(--line);
  border-radius:12px;
  margin-top:16px;
  overflow:hidden;
}

.table {
  border-collapse:collapse;
  width:100%;
  margin-top:0;
  font-size:13px;
}

.table th,.table td {
  text-align:left;
  border-bottom:1px solid var(--line);
  padding:12px 14px;
}

.table tr:last-child td {
  border-bottom:none;
}

.table th {
  color:var(--muted);
  background:#f7f9fb;
  font-size:12px;
  font-weight:500;
}

.table tbody tr:hover td {
  background:#fafbfc;
}

.cell-strong {
  color:var(--navy);
  font-weight:600;
}

.price-input {
  border:1px solid var(--line);
  background:#fff;
  border-radius:8px;
  width:110px;
  padding:8px 10px;
}

.price-input:focus {
  border-color:var(--accent);
  outline:none;
}

.mini-btn {
  background:var(--navy);
  color:#fff;
  border-radius:8px;
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  transition:opacity .15s;
}

.mini-btn:hover {
  opacity:.92;
}

.btn-soft {
  color:var(--navy);
  border:1px solid var(--line);
  background:#fff;
  border-radius:8px;
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
}

.btn-soft:hover:not(:disabled) {
  border-color:var(--navy);
}

.btn-soft:disabled {
  opacity:.4;
  cursor:not-allowed;
}

.btn-soft.ok {
  color:var(--ok);
  background:#f0faf4;
  border-color:#b7e0c8;
}

.btn-soft.bad {
  color:var(--danger);
  background:#fdf4f4;
  border-color:#f0c0c0;
}

.btn-row {
  align-items:center;
  gap:8px;
  display:flex;
}

.btn-row.wrap {
  flex-wrap:wrap;
}

.tag {
  background:var(--accent-soft);
  color:var(--navy);
  border-radius:6px;
  align-items:center;
  padding:2px 8px;
  font-size:12px;
  font-weight:500;
  display:inline-flex;
}

.tag.ok {
  color:var(--ok);
  background:#e5f6ec;
}

.tag.bad {
  color:var(--danger);
  background:#fde8e8;
}

.tag.wait {
  color:var(--muted);
  background:#eef0f3;
}

.perm-block {
  border-top:1px solid var(--line);
  padding:14px 0;
}

.perm-block:first-of-type {
  border-top:none;
  padding-top:0;
}

.perm-block-head {
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  display:flex;
}

.perm-block-head span {
  font-size:12px;
  display:block;
}

.perm-delete {
  flex-shrink:0;
  margin-left:auto;
}

.perm-delete:disabled {
  opacity:.4;
  cursor:not-allowed;
}

.perm-chips {
  flex-wrap:wrap;
  gap:8px;
  display:flex;
}

.perm-chip {
  border:1px solid var(--line);
  color:var(--muted);
  background:#fff;
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
}

.perm-chip.on {
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
  font-weight:600;
}

.discount-box {
  flex-direction:column;
  gap:16px;
  display:flex;
}

.discount-box.is-disabled {
  opacity:.45;
  pointer-events:none;
}

.switch-row {
  color:var(--muted,#64748b);
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  align-items:center;
  gap:10px;
  font-size:13px;
  display:inline-flex;
}

.switch {
  cursor:pointer;
  background:#cbd5e1;
  border:none;
  border-radius:999px;
  flex-shrink:0;
  width:44px;
  height:26px;
  padding:0;
  transition:background .2s;
  position:relative;
}

.switch.on {
  background:#0a2a4a;
}

.switch-knob {
  background:#fff;
  border-radius:50%;
  width:20px;
  height:20px;
  transition:transform .2s;
  position:absolute;
  top:3px;
  left:3px;
  box-shadow:0 1px 3px #0003;
}

.switch.on .switch-knob {
  transform:translate(18px);
}

.discount-display {
  color:#fff;
  background:linear-gradient(135deg,#0a2a4a,#134078);
  border-radius:12px;
  align-items:baseline;
  gap:8px;
  padding:18px 20px;
  display:flex;
}

.discount-display span {
  opacity:.75;
  font-size:13px;
}

.discount-display strong {
  letter-spacing:-.03em;
  font-size:40px;
}

.discount-display em {
  opacity:.8;
  font-size:16px;
  font-style:normal;
}

.banner-edit {
  border:1px solid var(--line);
  background:#f8fafc;
  border-radius:12px;
  grid-template-columns:36px 140px 1fr;
  align-items:start;
  gap:12px;
  margin-bottom:12px;
  padding:12px;
  display:grid;
}

.banner-idx {
  background:var(--navy);
  color:#fff;
  border-radius:8px;
  place-items:center;
  width:28px;
  height:28px;
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  display:grid;
}

.banner-thumb-wrap {
  flex-direction:column;
  gap:8px;
  display:flex;
}

.banner-thumb {
  border:1px solid var(--line);
  color:#ffffffb3;
  background-color:#0a2a4a;
  background-image:linear-gradient(125deg,#134078,#0a2a4a),none;
  background-position:50%;
  background-repeat:repeat,repeat;
  background-size:cover;
  background-attachment:scroll,scroll;
  background-origin:padding-box,padding-box;
  background-clip:border-box,border-box;
  border-radius:10px;
  place-items:center;
  width:140px;
  height:72px;
  font-size:12px;
  display:grid;
  overflow:hidden;
}

.banner-upload {
  border:1px solid var(--line);
  cursor:pointer;
  height:32px;
  color:var(--navy);
  background:#fff;
  border-radius:8px;
  justify-content:center;
  align-items:center;
  font-size:12px;
  display:inline-flex;
}

.banner-upload:hover {
  border-color:var(--navy);
}

.banner-clear {
  height:32px;
  font-size:12px;
}

.banner-fields {
  gap:10px;
  display:grid;
}

.divider {
  background:var(--line);
  height:1px;
  margin:20px 0;
}

.order-summary {
  border:1px solid var(--line);
  background:#f8fafc;
  border-radius:12px;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:12px;
  padding:14px 16px;
  display:grid;
}

.order-summary>div {
  flex-direction:column;
  gap:4px;
  display:flex;
}

.order-summary span.muted {
  font-size:11px;
}

.order-summary strong {
  font-size:14px;
}

.price-em {
  color:var(--navy);
}

.review-row {
  border-bottom:1px solid var(--line);
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 0;
  display:flex;
}

.review-row:last-child {
  border-bottom:none;
}

.feedback-row {
  border-bottom:1px solid var(--line);
  padding:14px 0;
}

.feedback-row:last-child {
  border-bottom:none;
}

.feedback-meta {
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
  display:flex;
}

.supervise-review-list {
  flex-direction:column;
  gap:12px;
  display:flex;
}

.supervise-review-card {
  border:1px solid var(--line);
  background:#fbfcfe;
  border-radius:12px;
  padding:14px 16px;
}

.supervise-review-top {
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  display:flex;
}

.supervise-review-title {
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  display:flex;
}

.supervise-review-title strong {
  font-size:14px;
}

.login-stage {
  width:min(440px,100%);
  padding:8px;
}

.login-panel {
  border:1px solid var(--line);
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 50px #061a3024;
}

.login-brand {
  color:#fff;
  background:linear-gradient(145deg,#061a30,#0f3a66);
  align-items:center;
  gap:14px;
  padding:28px 28px 22px;
  display:flex;
}

.login-mark {
  background:#ffffff1a;
  border:1px solid #ffffff59;
  border-radius:14px;
  place-items:center;
  width:48px;
  height:48px;
  font-size:20px;
  font-weight:700;
  display:grid;
}

.login-brand h1 {
  margin:0;
  font-size:20px;
  font-weight:700;
}

.login-brand p {
  opacity:.7;
  margin:4px 0 0;
  font-size:12px;
}

.login-form {
  padding:24px 28px 28px;
}

.login-submit {
  border-radius:10px;
  width:100%;
  margin-top:8px;
  padding:12px;
}

.login-hint {
  text-align:center;
  color:var(--muted);
  margin:14px 0 0;
  font-size:12px;
}

.login-box {
  border:1px solid var(--line);
  width:min(420px,100%);
  box-shadow:var(--shadow);
  background:#fff;
  border-radius:16px;
  padding:36px 32px;
}

.login-box h1 {
  color:var(--navy);
  margin:0 0 6px;
  font-size:22px;
}

.hint-panel {
  align-self:flex-start;
  width:280px;
  margin-left:24px;
  position:sticky;
  top:88px;
}

.hint-panel .card {
  box-shadow:var(--shadow);
}

.hint-panel ol {
  color:var(--muted);
  margin:8px 0 0;
  padding-left:18px;
  font-size:13px;
  line-height:1.7;
}

.demo-path {
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
  display:flex;
}

.demo-path span {
  background:var(--accent-soft);
  color:var(--navy-mid);
  border-radius:6px;
  padding:4px 8px;
  font-size:11px;
}

@media (max-width:1100px) {
.stat-row,.action-grid,.order-summary {
  grid-template-columns:1fr 1fr;
}
.form-grid.three,.banner-edit {
  grid-template-columns:1fr;
}
}

@media (max-width:960px) {
.hint-panel {
  display:none;
}
.admin-wrap {
  grid-template-columns:1fr;
}
.admin-side {
  display:none;
}
}

.order-pin-top {
  justify-content:space-between;
  align-items:center;
  gap:8px;
  display:flex;
}

.task-card h3 {
  align-items:center;
  gap:8px;
  margin:0;
  display:inline-flex;
  position:relative;
}

.task-head {
  margin-bottom:4px;
}

.task-body {
  border-top:1px solid var(--line);
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  display:flex;
}

.task-file {
  flex:1;
  min-width:0;
  font-size:13px;
}

.notify-dot {
  background:var(--danger);
  border-radius:50%;
  width:8px;
  height:8px;
  display:inline-block;
}

.notify-num {
  background:var(--danger);
  color:#fff;
  border-radius:999px;
  place-items:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  font-size:10px;
  font-style:normal;
  display:inline-grid;
}

.logic-tip {
  background:#f7f9fc;
}

.logic-tip ol {
  color:var(--muted);
  margin:8px 0 0;
  padding-left:18px;
  font-size:12px;
  line-height:1.7;
}

.stage-grid {
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
  display:grid;
}

.stage-tile {
  border:1px solid var(--line);
  text-align:center;
  background:#fff;
  border-radius:12px;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:14px 10px;
  display:flex;
  position:relative;
}

.stage-count {
  background:var(--danger);
  color:#fff;
  border-radius:999px;
  place-items:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  font-size:10px;
  display:grid;
  position:absolute;
  top:8px;
  right:8px;
}

.stage-tile .stage-icon {
  width:32px;
  height:32px;
  color:var(--muted);
  background:#eef1f5;
  border-radius:50%;
  place-items:center;
  font-size:14px;
  font-weight:700;
  display:grid;
}

.stage-tile.status-已完成 .stage-icon {
  color:var(--ok);
  background:#e5f6ec;
}

.stage-tile.status-进行中 .stage-icon {
  background:var(--accent-soft);
  color:var(--accent);
}

.stage-tile .stage-status {
  color:var(--muted);
  font-size:11px;
}

.stage-tile.status-已完成 .stage-status {
  color:var(--ok);
}

.stage-tile.status-进行中 .stage-status {
  color:var(--accent);
}

.photo-row {
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  display:flex;
}

.photo-row.compact {
  margin-top:8px;
}

.photo-thumb {
  width:56px;
  height:56px;
  color:var(--navy);
  background:linear-gradient(135deg,#d7e3f0,#b8c9db);
  border-radius:8px;
  place-items:center;
  font-size:11px;
  font-weight:600;
  display:grid;
}

.photo-thumb.sm {
  width:40px;
  height:40px;
  font-size:10px;
}

.photo-add {
  border:1px dashed var(--navy-mid);
  min-width:88px;
  height:56px;
  color:var(--navy);
  background:var(--accent-soft);
  border-radius:8px;
  padding:0 10px;
  font-size:12px;
}

.material-item {
  border-bottom:1px solid var(--line);
  padding:12px 0;
}

.material-item:last-child {
  border-bottom:none;
}

.material-item-top {
  justify-content:space-between;
  align-items:center;
  gap:8px;
  display:flex;
}

.review-note {
  color:var(--danger);
  background:#fdeeee;
  border-radius:6px;
  margin-top:6px;
  padding:6px 8px;
  font-size:12px;
}

.customer-table-wrap {
  overflow-x:auto;
}

.cust-badge {
  color:#fff;
  background:#64748b;
  border-radius:6px;
  justify-content:center;
  align-items:center;
  min-width:42px;
  padding:2px 8px;
  font-size:12px;
  font-weight:700;
  display:inline-flex;
}

.cust-badge.cat-甲 {
  background:#0a2a4a;
}

.cust-badge.cat-乙 {
  background:#1a6fb5;
}

.cust-badge.cat-丙 {
  background:#0d9488;
}

.cust-badge.cat-丁 {
  background:#c2410c;
}

.customer-filter-row {
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  display:flex;
}

.reject-panel {
  background:#fff7f7;
  border:1px solid #fecaca;
  border-radius:10px;
  margin-top:12px;
  padding:12px;
}

.reject-panel .chip-grid {
  margin-top:6px;
}

.end-order-panel {
  background:#fff7f7;
  border:1px solid #fecaca;
  border-radius:10px;
  margin-top:12px;
  padding:12px;
}

.end-order-inline {
  flex-wrap:wrap;
  gap:6px;
  display:flex;
}

.upload-view-list {
  flex-direction:column;
  gap:10px;
  display:flex;
}

.upload-view-item {
  border:1px solid var(--line);
  background:#f8fafc;
  border-radius:10px;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  display:flex;
}

.upload-view-item strong {
  font-size:14px;
}

.upload-view-item .muted {
  margin-top:4px;
  font-size:12px;
}

.upload-photo-title {
  margin:0 0 10px;
  font-size:14px;
}

.upload-photo-grid {
  gap:12px;
  display:grid;
}

.upload-photo-card {
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:12px;
}

.upload-photo-card-head {
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  display:flex;
}

.customer-upload-row>td {
  border-bottom:1px solid var(--line);
  background:#f8fafc;
  padding:0 14px 14px;
}

.customer-upload-panel {
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  margin-top:4px;
  padding:14px;
}

.customer-upload-panel-head {
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  display:flex;
}

.row-expanded td {
  background:#f1f5f9;
}

.photo-thumb.clickable {
  cursor:pointer;
  font:inherit;
  border:none;
}

.photo-thumb.clickable:hover {
  outline:2px solid var(--navy);
  outline-offset:1px;
}

.material-actions {
  gap:8px;
  margin-top:8px;
  display:flex;
}

.mini-btn:disabled {
  opacity:.4;
  cursor:not-allowed;
}

.mini-btn.ghost {
  color:var(--navy);
  border:1px solid var(--navy);
  background:#fff;
}

.nav-text-btn {
  color:var(--navy);
  white-space:nowrap;
  padding:6px 4px;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
}

.field textarea {
  border:1px solid var(--line);
  resize:vertical;
  border-radius:10px;
  width:100%;
  padding:10px 12px;
}

.profile-page {
  padding-top:10px;
}

.profile-hero {
  color:#fff;
  background:linear-gradient(145deg,#061a30 0%,#0f3a66 55%,#1a6fb5 140%);
  border-radius:16px;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  padding:18px 16px;
  display:flex;
  position:relative;
  overflow:hidden;
}

.profile-hero:after {
  content:"";
  background:#ffffff14;
  border-radius:50%;
  width:120px;
  height:120px;
  position:absolute;
  top:-30px;
  right:-20px;
}

.profile-avatar {
  z-index:1;
  background:#ffffff29;
  border:1px solid #ffffff47;
  border-radius:16px;
  flex-shrink:0;
  place-items:center;
  width:52px;
  height:52px;
  font-size:18px;
  font-weight:700;
  display:grid;
}

.profile-hero-text {
  z-index:1;
  flex:1;
  min-width:0;
}

.profile-hero-text strong {
  letter-spacing:.02em;
  font-size:17px;
  display:block;
}

.profile-hero-text span {
  opacity:.72;
  margin-top:4px;
  font-size:12px;
  display:block;
}

.profile-status {
  z-index:1;
  background:#ffffff2e;
  border:1px solid #ffffff40;
  border-radius:999px;
  padding:4px 10px;
  font-size:11px;
  font-weight:600;
}

.profile-status.warn {
  background:#c47a0059;
  border-color:#ffc86466;
}

.profile-status.gray {
  opacity:.85;
  background:#ffffff1a;
}

.profile-section-head {
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  display:flex;
}

.profile-section-head h3 {
  margin:0;
  font-size:15px;
}

.profile-todo-empty {
  text-align:center;
  padding:18px 8px 8px;
}

.profile-todo-empty-ico {
  width:40px;
  height:40px;
  color:var(--ok);
  background:#e5f6ec;
  border-radius:50%;
  place-items:center;
  margin:0 auto 8px;
  font-weight:700;
  display:grid;
}

.profile-todo-empty p {
  color:var(--text);
  margin:0 0 4px;
  font-size:14px;
  font-weight:600;
}

.profile-todo-item {
  border-top:1px solid var(--line);
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 0;
  display:flex;
}

.profile-todo-item:first-of-type {
  border-top:none;
}

.profile-todo-item.done {
  opacity:.65;
}

.profile-todo-main {
  flex:1;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  display:flex;
}

.profile-todo-dot {
  border-radius:50%;
  flex-shrink:0;
  width:8px;
  height:8px;
  margin-top:6px;
}

.profile-todo-dot.wait {
  background:var(--danger);
}

.profile-todo-dot.ok {
  background:var(--ok);
}

.profile-todo-text {
  margin-bottom:6px;
  font-size:13px;
  line-height:1.45;
}

.profile-todo-item.done .profile-todo-text {
  text-decoration:line-through;
}

.profile-menu {
  padding:4px 8px;
}

.profile-menu-item {
  border-bottom:1px solid var(--line);
  text-align:left;
  width:100%;
  color:inherit;
  grid-template-columns:36px 1fr auto 14px;
  align-items:center;
  gap:10px;
  padding:13px 8px;
  display:grid;
}

.profile-menu-item:last-child {
  border-bottom:none;
}

.profile-menu-item:active {
  background:#f7f9fc;
}

.profile-menu-ico {
  border-radius:10px;
  place-items:center;
  width:36px;
  height:36px;
  font-size:13px;
  font-weight:700;
  display:grid;
}

.profile-menu-ico.tone-blue {
  color:#1a6fb5;
  background:#e8f2fb;
}

.profile-menu-ico.tone-navy {
  color:#0a2a4a;
  background:#e8eef6;
}

.profile-menu-ico.tone-teal {
  color:#1a7a6a;
  background:#e6f5f2;
}

.profile-menu-ico.tone-amber {
  color:#a06a1a;
  background:#f8f0e4;
}

.profile-menu-ico.tone-slate {
  color:#5a6675;
  background:#eef0f3;
}

.profile-menu-label {
  color:var(--text);
  font-size:14px;
  font-weight:600;
}

.profile-menu-tip {
  color:var(--muted);
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:right;
  max-width:150px;
  font-size:12px;
  overflow:hidden;
}

.profile-menu-arrow {
  color:#b0bac6;
  font-size:18px;
  line-height:1;
}