/* ================================================================
   文字參數調整區：可在此統一調整字體、大小、粗細與主要文字顏色
   ================================================================ */
:root {
  --font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-size-base: 16px;
  --font-size-small: 14px;
  --font-size-label: 15px;
  --font-size-section-title: 22px;
  --font-size-page-title: clamp(30px, 3vw, 39px);
  --font-size-vendor-title: 19px;
  --font-size-company: clamp(22px, 2.2vw, 29px);
  --font-size-vendor-id: 21px;
  --font-size-total: clamp(28px, 3vw, 39px);
  --font-size-auth-title: clamp(28px, 3vw, 36px);
  --font-size-auth-label: 15px;
  --font-size-auth-help: 13px;
  --font-size-notice: 14px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --color-text: #2c2020;
  --color-muted: #695d5c;
  --color-heading: #651724;
  --color-accent: #8f1830;
  --color-money: #8a182b;
}

/* ================================================================
   元件尺寸調整區：可在此統一調整頁寬、高度、圓角及欄位尺寸
   ================================================================ */
:root {
  --page-max-width: 1460px;
  --header-height: 78px;
  --overview-min-height: 150px;
  --overview-title-width: 410px;
  --vendor-illustration-width: 105px;
  --filter-min-height: 154px;
  --input-height: 52px;
  --input-year-width: 212px;
  --input-month-width: 164px;
  --button-width: 142px;
  --panel-radius: 16px;
  --panel-gap: 12px;
  --auth-card-width: 1040px;
  --auth-control-height: 52px;
  --auth-art-width: 42%;
  --auth-card-min-height: 590px;
  --auth-password-min-height: 650px;
  --header-profile-width: 142px;
  --table-sticky-top: 0px;
  --pagination-control-height: 40px;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  background:
    radial-gradient(circle at 10% 5%, rgba(238, 202, 182, .2), transparent 29rem),
    radial-gradient(circle at 91% 38%, rgba(248, 210, 189, .18), transparent 32rem),
    #f8f6f3;
}
button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: -50px; left: 1rem; padding: .65rem 1rem; color: #fff; background: var(--color-heading); border-radius: 0 0 8px 8px; transition: top .2s; }
.skip-link:focus { top: 0; }

.site-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 max(4vw, 24px);
  background: rgba(255, 252, 249, .94);
  border: 1px solid #e6bda7;
  border-top-color: #f0d7c9;
  border-radius: 0 0 7px 7px;
  box-shadow: 0 4px 16px rgba(68, 37, 28, .09);
  backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: center; gap: 20px; font-size: 27px; font-weight: var(--font-weight-bold); letter-spacing: .08em; }
.brand-mark { position: relative; width: 50px; height: 50px; filter: drop-shadow(0 5px 5px rgba(87, 26, 26, .19)); transform: rotate(30deg); }
.brand-mark i { position: absolute; width: 28px; height: 31px; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.brand-mark i:nth-child(1) { top: 0; left: 11px; background: linear-gradient(145deg,#9c1930,#e07851); }
.brand-mark i:nth-child(2) { top: 18px; left: 0; background: linear-gradient(145deg,#651627,#bd4a43); }
.brand-mark i:nth-child(3) { top: 18px; right: 0; background: linear-gradient(145deg,#e37c52,#8f1b2b); }
.header-actions { display: flex; gap: 20px; }
.header-button { min-width: 198px; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; color: #5c2527; background: transparent; border: 1px solid #dfad9d; border-radius: 11px; cursor: pointer; transition: color .2s, background .2s, border-color .2s, transform .2s, box-shadow .2s; }
.header-button--logout { min-width: 142px; color: #ad1729; border-color: #eb6648; font-weight: 600; }
.header-button--profile { min-width: var(--header-profile-width); font-weight: 600; }
.header-button:hover { color: #fff; background: linear-gradient(135deg,#7c1327,#bd352e); border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(126, 23, 39, .2); }
.header-user { margin-left: 3px; }

.page-shell { width: min(var(--page-max-width), calc(100% - 48px)); margin: 14px auto 28px; }
.panel { position: relative; overflow: hidden; border: 1px solid rgba(150, 106, 87, .25); border-radius: var(--panel-radius); background: rgba(255,255,255,.74); box-shadow: 0 5px 14px rgba(60, 39, 33, .1); }
.panel + .panel { margin-top: var(--panel-gap); }

.hero {
    min-height: var(--overview-min-height); 
    /*padding: 17px 42px 20px;*/   /* 調高度 */
    padding: 10px 42px 12px;   /* 調高度 */
    background: linear-gradient(100deg,rgba(255,255,255,.96),rgba(255,246,240,.82));
}
.overview-accent { 
    position: absolute; inset: 0 auto 0 0; width: 9px; background: linear-gradient(#a70f42,#8c172d 55%,#ef7b2a); }
.breadcrumb { display: flex; gap: 19px; color: #504748; font-size: var(--font-size-small); }
.breadcrumb a { transition: color .2s; }
.breadcrumb a:hover { color: var(--color-accent); }
.overview-content { 
    position: relative; z-index: 2; display: flex; align-items: center; 
    /*min-height: 126px; margin-top: 7px;*/   /* 調高度  */
    min-height: 90px; margin-top: 2px;   /* 調高度  */
}
.hero-title-row { flex: 0 0 var(--overview-title-width); display: flex; align-items: center; gap: 18px; }
.hero-title-row h1 { margin: 0 0 3px; color: #352222; font-size: var(--font-size-page-title); line-height: 1.15; letter-spacing: .08em; }
.hero-title-row p { margin: 0; color: var(--color-muted); letter-spacing: .03em; }
.hero-icon { width: 67px; height: 72px; display: grid; place-items: center; color: #a83f46; background: linear-gradient(145deg,#f8d5cd,#af4850); border: 1px solid #b1494c; border-radius: 11px; box-shadow: inset 0 0 0 5px rgba(255,255,255,.45), 0 5px 10px rgba(95,31,34,.18); }
.hero-icon svg { width: 43px; height: 43px; stroke: #fff8f2; filter: drop-shadow(0 2px 1px rgba(94,23,29,.3)); }
.overview-divider { align-self: stretch; width: 1px; margin: 5px 25px; background: linear-gradient(transparent,#d7bbb0 20% 80%,transparent); }
.hero-art { position: absolute; inset: 0 0 0 72%; pointer-events: none; opacity: .62; }
.ring { position: absolute; width: 150px; height: 68px; right: 76px; top: 37px; border: 17px solid #bd684e; border-left-color: #f3b28b; border-right-color: #8f3d35; border-radius: 50%; box-shadow: 4px 9px 12px rgba(101,44,35,.2), inset 3px 4px 5px rgba(255,232,210,.8); transform: rotate(-28deg); }
.orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 25%,#fff3d8 0 6%,#dc9b59 28%,#9d5636 65%,#efc28a 100%); box-shadow: 3px 5px 8px rgba(100,50,31,.18); }
.orb--one { width: 44px; height: 44px; right: 290px; top: 42px; }.orb--two { width: 24px; height: 24px; right: 355px; top: 97px; }.orb--three { width: 23px; height: 23px; right: 47px; top: 115px; }
.wave { position: absolute; width: 730px; height: 170px; right: -150px; top: 85px; border: 1px solid rgba(213,120,87,.32); border-radius: 50%; transform: rotate(-9deg); }.wave--two { top: 101px; right: -105px; border-color: rgba(182,55,60,.2); }

.hero-vendor { display: flex; align-items: center; min-width: 0; }
.building-art { position: relative; z-index: 2; flex: 0 0 var(--vendor-illustration-width); height: 92px; filter: drop-shadow(0 7px 4px rgba(93,46,36,.22)); transform: scale(.78); transform-origin: center; }
.tower { position: absolute; bottom: 23px; border: 1px solid #9b574d; background-color: #c9796a; background-image: repeating-linear-gradient(90deg,transparent 0 12px,rgba(91,40,39,.75) 13px 18px), linear-gradient(90deg,#f7d5c9,#ad554f); clip-path: polygon(50% 0,100% 13%,100% 100%,0 100%,0 13%); }
.tower--main { left: 42px; width: 62px; height: 93px; }.tower--left { left: 17px; width: 43px; height: 66px; }.tower--right { left: 92px; width: 39px; height: 60px; }
.building-base { position: absolute; left: 7px; right: 1px; bottom: 8px; height: 24px; border-radius: 50%; background: linear-gradient(#f4b785,#984233 48%,#df8c59 55%,#713126); border: 2px solid #f3b57c; }
.vendor-content { position: relative; z-index: 2; flex: 1; min-width: 0; }
.vendor-content h2 { margin: 0 0 8px; color: var(--color-heading); font-size: var(--font-size-vendor-title); letter-spacing: .07em; }
.vendor-fields { display: flex; align-items: flex-end; }
.vendor-field { min-width: 150px; padding: 2px 25px; border-left: 1px solid #d9c0b8; }
.vendor-field:first-child { padding-left: 0; border-left: 0; }
.vendor-field--company { min-width: 355px; }
.field-label { display: table; margin-bottom: 7px; padding: 2px 9px; color: #7c3f3f; background: #f5e8e4; border-radius: 4px; font-size: var(--font-size-label); }
.vendor-field strong { font-size: var(--font-size-vendor-id); color: #151313; white-space: nowrap; }
.vendor-field--company strong { font-size: var(--font-size-company); }

.filter-card { min-height: var(--filter-min-height); padding: 16px 30px 22px; }
.filter-error { margin: 12px 0 0 51px; color: #8d1830; font-size: var(--font-size-notice); }
.section-heading { display: flex; align-items: flex-start; gap: 16px; }
.section-heading > svg { flex: 0 0 auto; width: 32px; height: 32px; color: var(--color-accent); }
.section-heading h2 { margin: 0; color: var(--color-heading); font-size: var(--font-size-section-title); letter-spacing: .07em; }
.section-heading p { margin: 1px 0 0; color: var(--color-muted); font-size: var(--font-size-small); }
.date-form { display: flex; align-items: flex-end; gap: 15px; margin: -3px 17px 0 51px; }
.date-group { display: grid; grid-template-columns: var(--input-year-width) var(--input-month-width); gap: 14px; margin: 0; padding: 0; border: 0; }
.date-group legend { grid-column: 1/-1; padding: 0; margin: 0 0 -4px; color: #5f5555; font-size: var(--font-size-small); }
select { height: var(--input-height); padding: 0 45px 0 17px; color: #241f1f; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23741329' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 15px center; border: 1px solid #d9b7a4; border-radius: 9px; appearance: none; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
select:hover { border-color: var(--color-accent); }
select:focus { outline: 0; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(143,24,48,.12); }
.date-separator { flex: 0 0 43px; height: 43px; display: grid; place-items: center; margin-bottom: 4px; color: var(--color-heading); font-weight: 700; background: #faece8; border-radius: 50%; box-shadow: 0 3px 10px rgba(97,39,39,.12); }
.form-actions { display: flex; gap: 24px; margin-left: auto; }
.button { width: var(--button-width); height: var(--input-height); display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 9px; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(99,37,33,.19); }
.button--primary { color: #fff; background: linear-gradient(135deg,#82162d,#a82431 58%,#e56537); border: 1px solid #a94335; box-shadow: 0 4px 9px rgba(109,26,34,.24); }
.button--primary:hover { background: linear-gradient(135deg,#6e1025,#bd2e32 58%,#ef7341); }
.button--secondary { color: #392a28; background: #fffaf7; border: 1px solid #d9b9a7; }
.button--secondary:hover { color: var(--color-heading); border-color: var(--color-accent); background: #fff; }

.records-card { padding: 15px 20px 16px; overflow: visible; }
.records-header { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 12px; }
.section-heading--compact { align-items: center; }
.record-summary { display: flex; gap: 12px; align-items: center; font-size: var(--font-size-small); }
.record-summary span, .record-summary strong { padding: 7px 16px; border-radius: 99px; }
.record-summary span { display: inline-flex; align-items: center; gap: 8px; color: var(--color-heading); background: #f5dedd; }
.record-summary span svg { width: 18px; height: 18px; }
.record-summary strong { color: #493318; background: #f8dfae; }
.table-wrap { overflow: visible; border: 1px solid #ddada0; border-radius: 12px 12px 0 0; }
table { width: 100%; border-collapse: collapse; text-align: center; }
thead { background: linear-gradient(90deg,#f8e8e5,#fff1e8,#f4dedd); }
th { height: 42px; padding: 8px 14px; color: #332421; font-weight: 700; white-space: nowrap; }
.records-card thead th { position: sticky; top: var(--table-sticky-top); z-index: 15; background: #f8e7e3; box-shadow: inset 0 -1px #dcaea1,0 3px 8px rgba(69,36,31,.1); }
td { height: 49px; padding: 5px 14px; border-top: 1px solid #eaded8; }
tbody tr:nth-child(even) { background: #fdf6ef; }
tbody tr { transition: background .2s, box-shadow .2s; }
tbody tr:hover { background: #fff0e8; box-shadow: inset 4px 0 var(--color-accent); }
.empty-row td { height: 92px; color: var(--color-muted); text-align: center; }
td:nth-child(3) { text-align: left; min-width: 310px; }
td:nth-child(3) strong, td:nth-child(3) span { display: block; }
td:nth-child(3) strong, td:nth-child(4) b { color: var(--color-money); }
td:nth-child(4) b { font-size: 18px; letter-spacing: .025em; }
.total-bar { min-height: 69px; display: flex; justify-content: flex-end; align-items: center; gap: 23px; padding: 9px 30px; color: #281d1b; background: linear-gradient(105deg,#c7676c 0%,#f2a492 31%,#fff5ea 62%,#f2d2c2 100%); border: 1px solid #df8746; border-top: 0; border-radius: 0 0 12px 12px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.42); font-size: 20px; font-weight: 700; }
.total-bar i { width: 1px; height: 31px; background: #cda38f; }
.total-bar strong { color: #6e1225; font-size: var(--font-size-total); letter-spacing: .04em; }
.coin-stack { width: 45px; height: 45px; display: grid; place-items: center; color: #9c4a1d; background: radial-gradient(circle,#ffe69f,#e8953a 64%,#9d4f1f); border: 4px double #fff1b8; border-radius: 50%; box-shadow: -9px 6px 0 -3px #c97926, -9px 6px 0 0 #f4c76b; }
.pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; padding:16px 4px 2px; }
.page-link { min-width:var(--pagination-control-height); height:var(--pagination-control-height); display:inline-flex; align-items:center; justify-content:center; padding:0 13px; color:#6d2732; background:#fffaf7; border:1px solid #debcae; border-radius:8px; font-size:14px; font-weight:600; transition:color .2s,background .2s,border-color .2s,transform .2s,box-shadow .2s; }
.page-link:hover { color:#fff; background:var(--color-accent); border-color:var(--color-accent); transform:translateY(-1px); box-shadow:0 5px 11px rgba(113,28,42,.16); }
.page-link.is-current { color:#fff; background:linear-gradient(135deg,#77152a,#b52e35); border-color:#8f1830; pointer-events:none; }
.page-link.is-disabled { color:#aa9b97; background:#f2eeeb; border-color:#e3d9d4; pointer-events:none; }
.page-status { margin-left:8px; color:var(--color-muted); font-size:13px; }

@media (max-width: 1180px) {
  :root { --overview-title-width: 360px; --input-year-width: 170px; --input-month-width: 135px; }
  .overview-divider { margin-inline: 17px; }
  .building-art { display: none; }
  .vendor-field { min-width: 125px; padding-inline: 18px; }
  .vendor-field--company { min-width: 300px; }
  .date-form { margin-left: 0; flex-wrap: wrap; }
  .form-actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 800px) {
  :root { --header-height: 68px; --panel-radius: 13px; }
  .site-header { padding: 0 18px; }
  .brand { gap: 12px; font-size: 21px; }
  .brand-mark { width: 39px; height: 39px; transform: rotate(30deg) scale(.78); }
  .header-actions { gap: 8px; }
  .header-button { min-width: 46px; width: 46px; padding: 0; }
  .header-button span, .header-user { display: none; }
  .header-button--logout { min-width: 46px; }
  .header-button--profile { min-width: 46px; }
  .page-shell { width: min(100% - 24px, var(--page-max-width)); margin-top: 12px; }
  .hero { min-height: 0; padding: 18px 21px 21px; }
  .overview-content { display: block; min-height: 0; margin-top: 14px; }
  .hero-art { left: 45%; opacity: .3; }
  .ring { right: 19px; transform: rotate(-28deg) scale(.76); }
  .orb--one { right: 180px; }.orb--two { right: 240px; }.orb--three { right: 10px; }
  .hero-title-row { gap: 14px; }
  .hero-icon { width: 57px; height: 62px; }
  .hero-title-row p { max-width: 235px; font-size: 13px; }
  .overview-divider { display: block; width: 100%; height: 1px; margin: 16px 0 13px; background: linear-gradient(90deg,#d7bbb0,transparent); }
  .hero-vendor { display: block; }
  .vendor-fields { display: grid; gap: 14px; }
  .vendor-field, .vendor-field--company { min-width: 0; padding: 0; border: 0; }
  .vendor-field strong { white-space: normal; }
  .filter-card { padding: 18px 20px 22px; }
  .date-form { margin-top: 15px; display: grid; grid-template-columns: 1fr 43px 1fr; align-items: end; }
  .date-group { grid-template-columns: 1fr 1fr; }
  .date-separator { margin-bottom: 4px; }
  .form-actions { grid-column: 1/-1; }
  .filter-error { margin-left: 0; }
  .records-header { align-items: flex-start; gap: 14px; }
  .record-summary { flex-wrap: wrap; justify-content: flex-end; }
  .table-wrap { border: 0; overflow: visible; }
  table, tbody, tr, td { display: block; }
  thead { display: none; }
  .records-card thead th { position: static; }
  tbody { display: grid; gap: 10px; }
  tbody tr, tbody tr:nth-child(even) { padding: 9px 13px; background: #fffaf7; border: 1px solid #ead5ca; border-radius: 10px; box-shadow: 0 3px 8px rgba(60,39,33,.06); }
  tbody tr.empty-row { padding: 20px 13px; }
  .empty-row td { display: block; min-height: 0; height: auto; border: 0; text-align: center; }
  .empty-row td::before { content: none; }
  td { height: auto; min-height: 34px; display: grid; grid-template-columns: 42% 58%; align-items: center; padding: 6px 2px; text-align: left; border-top: 1px dashed #eaded8; }
  td:first-child { border-top: 0; }
  td::before { content: attr(data-label); color: #745b57; font-size: 13px; font-weight: 600; }
  td:nth-child(3) { min-width: 0; }
  .total-bar { margin-top: 10px; border: 1px solid #df8746; border-radius: 12px; }
  .pagination { padding-top:13px; gap:6px; }
  .page-link { padding-inline:10px; }
  .page-status { width:100%; margin:3px 0 0; text-align:center; }
}

@media (max-width: 560px) {
  .hero { padding: 16px; }
  .breadcrumb { gap: 10px; }
  .hero-title-row h1 { letter-spacing: .03em; }
  .hero-icon { display: none; }
  .vendor-content h2 { margin-bottom: 12px; }
  .date-form { grid-template-columns: 1fr; gap: 14px; }
  .date-group { grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .date-separator { margin: 0 auto; width: 39px; height: 39px; }
  .form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .button { width: 100%; }
  .records-card { padding: 15px 10px 12px; }
  .records-header { display: block; }
  .record-summary { justify-content: flex-start; margin-top: 12px; gap: 7px; }
  .record-summary span, .record-summary strong { padding: 6px 10px; }
  td { grid-template-columns: 45% 55%; }
  .total-bar { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; justify-items: end; padding: 12px 16px; }
  .coin-stack, .total-bar i { display: none; }
  .total-bar span:not(.coin-stack) { font-size: 15px; }
  .total-bar strong { grid-column: 1/-1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ================================================================
   註冊與登入元件
   ================================================================ */
.header-actions form { margin: 0; }
.header-account { max-width: 260px; display: inline-flex; align-items: center; gap: 9px; color: #6f3035; font-size: 14px; }
.header-account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-account svg { flex: 0 0 auto; }
.auth-stage { min-height: calc(100vh - var(--header-height) - 58px); display: grid; place-items: center; padding: 22px 0; }
.auth-card { width: min(100%, var(--auth-card-width)); min-height: var(--auth-card-min-height); display: grid; grid-template-columns: var(--auth-art-width) 1fr; overflow: hidden; background: rgba(255,255,255,.92); }
.auth-card--register { --auth-card-min-height: 690px; }
.auth-card--password { --auth-card-min-height: var(--auth-password-min-height); }
.auth-art { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 48px 42px; color: #fff; background: linear-gradient(150deg,#651429 0%,#9b2137 52%,#e46f42 100%); }
.auth-art::before,.auth-art::after { content:""; position:absolute; border:1px solid rgba(255,225,207,.28); border-radius:50%; }
.auth-art::before { width:520px; height:300px; top:80px; left:-190px; transform:rotate(-18deg); box-shadow:0 0 0 18px rgba(255,255,255,.025),0 0 0 20px rgba(255,226,207,.09); }
.auth-art::after { width:300px; height:300px; right:-180px; bottom:-160px; background:rgba(255,230,216,.08); }
.auth-ring { position:absolute; width:142px; height:66px; top:105px; left:50%; border:15px solid #f1a278; border-left-color:#ffd0ae; border-right-color:#8b2b30; border-radius:50%; transform:translateX(-50%) rotate(-27deg); box-shadow:8px 12px 18px rgba(48,8,15,.25),inset 3px 3px 5px rgba(255,238,219,.65); }
.auth-orb { position:absolute; border-radius:50%; background:radial-gradient(circle at 30% 25%,#ffe9ca,#d88b51 45%,#7f302c); box-shadow:5px 7px 12px rgba(54,11,15,.25); }
.auth-orb--one { width:42px; height:42px; top:72px; left:62px; }.auth-orb--two { width:23px; height:23px; top:190px; right:48px; }
.auth-art-copy { position:relative; z-index:2; display:grid; gap:10px; }
.auth-art-copy svg { width:42px; height:42px; margin-bottom:4px; }
.auth-art-copy strong { font-size:28px; letter-spacing:.08em; }
.auth-art-copy span { max-width:290px; color:#f8ded8; line-height:1.7; }
.auth-content { padding:42px clamp(34px,5vw,68px) 34px; }
.auth-heading { display:flex; align-items:center; gap:15px; }
.auth-heading-icon { width:53px; height:53px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#8f1830,#d95b3f); border-radius:14px; box-shadow:0 8px 18px rgba(109,22,36,.2); }
.auth-heading-icon svg { width:30px; height:30px; }
.auth-heading p { margin:0 0 2px; color:#ac6b67; font-size:11px; font-weight:700; letter-spacing:.18em; }
.auth-heading h1 { margin:0; color:#3a2222; font-size:var(--font-size-auth-title); line-height:1.15; letter-spacing:.06em; }
.auth-intro { margin:14px 0 24px; color:var(--color-muted); }
.auth-form { display:grid; gap:17px; }
.auth-field { display:grid; gap:7px; }
.auth-field label { color:#4d3433; font-size:var(--font-size-auth-label); font-weight:600; }
.auth-input { height:var(--auth-control-height); display:flex; align-items:center; gap:11px; padding:0 15px; background:#fffcfa; border:1px solid #dec6bc; border-radius:10px; transition:border-color .2s,box-shadow .2s,transform .2s; }
.auth-input:focus-within { border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(143,24,48,.11); transform:translateY(-1px); }
.auth-input > svg { flex:0 0 auto; width:20px; height:20px; color:#963043; }
.auth-input input { min-width:0; flex:1; height:100%; padding:0; color:#2b2221; background:transparent; border:0; outline:0; }
.auth-input input::placeholder { color:#b09f9b; }
.auth-input--readonly { background:#f7efeb; }.auth-input--readonly input { color:#711c2b; font-weight:700; }
.password-toggle { width:34px; height:34px; display:grid; place-items:center; padding:0; color:#846b68; background:transparent; border:0; border-radius:7px; cursor:pointer; }
.password-toggle:hover { color:var(--color-accent); background:#f6e6e2; }.password-toggle svg { width:19px; height:19px; }
.auth-submit { height:54px; display:flex; align-items:center; justify-content:center; gap:16px; margin-top:4px; color:#fff; font-weight:700; letter-spacing:.07em; background:linear-gradient(135deg,#74142a,#a62335 58%,#e6673e); border:1px solid #a43b38; border-radius:10px; box-shadow:0 7px 15px rgba(99,23,33,.23); cursor:pointer; transition:transform .2s,box-shadow .2s,filter .2s; }
.auth-submit:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(99,23,33,.28); filter:saturate(1.12); }.auth-submit span { font-size:22px; transition:transform .2s; }.auth-submit:hover span { transform:translateX(4px); }
.validation-summary { display:none; padding:10px 13px; color:#82182a; background:#fae7e4; border-left:4px solid #a91f35; border-radius:7px; font-size:14px; }
.validation-summary.validation-summary-errors { display:block; }.validation-summary ul { margin:0; padding-left:19px; }
.field-error { min-height:0; color:#a11931; font-size:12px; }.field-error:empty { display:none; }
.form-notice { padding:10px 13px; color:#7a2630; background:#f9e9e3; border-radius:8px; font-size:14px; }.form-notice--success { color:#43602b; background:#edf4e4; }
.page-notice { width:100%; margin:0 0 var(--panel-gap); border:1px solid #d7e6c6; box-shadow:0 3px 10px rgba(55,85,33,.08); }
.auth-footer-note { display:flex; gap:9px; align-items:flex-start; margin-top:18px; padding:12px 14px; color:#74605d; background:#faf5f1; border-radius:9px; font-size:12px; line-height:1.6; }
.auth-footer-note svg { flex:0 0 auto; width:18px; height:18px; color:#a3434c; }
.auth-switch { margin:18px 0 0; text-align:center; color:#746360; font-size:14px; }.auth-switch a { color:var(--color-accent); font-weight:700; }.auth-switch a:hover { text-decoration:underline; }
.password-rule { margin:0; color:#887572; font-size:var(--font-size-auth-help); }
.password-strength { display:grid; grid-template-columns:repeat(4,1fr) auto; align-items:center; gap:5px; color:#8e7c79; font-size:11px; }
.password-strength i { height:4px; background:#eadeda; border-radius:9px; transition:background .2s; }
.password-strength[data-score="1"] i:nth-child(1),.password-strength[data-score="2"] i:nth-child(-n+2),.password-strength[data-score="3"] i:nth-child(-n+3),.password-strength[data-score="4"] i { background:linear-gradient(90deg,#9a1931,#e56b42); }

@media (max-width:800px) {
  .header-account { display:none; }
  .auth-stage { min-height:0; padding:0; }
  .auth-card,.auth-card--register { min-height:0; grid-template-columns:1fr; }
  .auth-art { min-height:190px; padding:28px; }
  .auth-ring { top:42px; left:70%; transform:translateX(-50%) rotate(-27deg) scale(.72); }
  .auth-art-copy svg { display:none; }.auth-art-copy strong { font-size:23px; }.auth-art-copy span { font-size:13px; }
  .auth-content { padding:30px 24px; }
}
@media (max-width:480px) {
  .auth-art { min-height:150px; padding:22px; }.auth-art-copy span { max-width:230px; }
  .auth-content { padding:25px 18px; }.auth-heading-icon { width:47px; height:47px; }
}