/* FINANME / MONEY NOTEBOOK — independent editorial interface, v2.0 */
:root{
  --paper:#faf6ee;--card:#fffdf8;--ink:#262641;--muted:#706d7a;
  --border:#ddd8d2;--indigo:#4748d9;--indigo-dark:#2d329b;
  --coral:#ff8768;--butter:#ffe7a2;--lilac:#dfdcff;--soft:#f0edff;
  --pine:var(--indigo);--pine-dark:var(--ink);--green:var(--indigo);
  --mint:var(--lilac);--cream:var(--paper);--white:var(--card);
  --blue:var(--indigo);--danger:#bb4455;--red-bg:#fff0ec;
  --shadow:0 3px 0 rgba(38,38,65,.07);
  color:var(--ink);background:var(--paper);
}
body{background:var(--paper);color:var(--ink)}
button,input,select,textarea{letter-spacing:0}
button:focus-visible,a:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
a,.text-btn{color:var(--indigo)}
.app-shell{display:block;min-height:100vh;background:var(--paper)}
/* Header is an editorial masthead, not a side navigation. */
.sidebar{display:block;position:relative;left:auto;top:auto;z-index:15;width:100%;height:auto;min-height:0;padding:0;box-shadow:none;transition:none;background:var(--card);color:var(--ink);border-bottom:2px solid var(--ink)}
.sidebar-topline{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:9px max(30px,calc((100vw - 1430px)/2 + 44px));font:750 10px/1.3 Arial,sans-serif;letter-spacing:2px;color:#595771;background:#f2efff;border-bottom:1px solid #e0daf7}
.topline-star{color:var(--coral);font-size:15px}
.sidebar-actions{display:flex;align-items:center;gap:20px;letter-spacing:0;font-weight:650;color:#595675}
.save-status{color:#3b3898}
.save-status:before{content:'●';font-size:7px;color:#5b4fe5;margin-right:7px;vertical-align:1px}
.lock-button{display:inline-flex;margin:0;padding:7px 12px;width:auto;border:1px solid #d4cde9;border-radius:99px;background:#fffdf9;color:#3c3975;font-size:11px;font-weight:750;text-align:center}
.lock-button:hover{background:#e8e5ff}
.sidebar-brand{display:flex;align-items:center;gap:20px;max-width:1430px;margin:0 auto;padding:25px 44px 27px}
.brand-symbol{position:relative;flex-shrink:0;display:grid;place-items:center;width:62px;height:62px;padding:0;border:2px solid var(--ink);border-radius:15px;background:var(--coral);color:var(--ink);font:900 38px/1 Arial,sans-serif;letter-spacing:-3px;transform:rotate(-5deg);box-shadow:5px 5px 0 #e4dfff}
.brand-symbol>span{position:absolute;top:-10px;right:-11px;font:26px/1 Arial,sans-serif;letter-spacing:0;color:var(--indigo)}
.brand-words{display:flex;flex-direction:column;gap:1px}.brand-words strong{font-size:40px;line-height:1.05;letter-spacing:-2.5px;font-weight:900;font-family:Arial,"PingFang TC",sans-serif;color:#222340}
.brand-period{color:var(--coral)}.brand-words small{font-size:12px;color:#686575;letter-spacing:2px;font-weight:650}
.brand-annotation{margin-left:auto;transform:rotate(5deg);background:var(--butter);color:#29263d;border:1.5px solid #29263d;box-shadow:3px 3px 0 #29263d;padding:11px 17px;display:flex;flex-direction:column;align-items:center;gap:4px;font:900 11px/1.25 Arial,sans-serif;letter-spacing:1px}
.nav-strip{background:var(--card);border-top:1px solid #ebe6e3}.sidebar nav{display:flex;flex-direction:row;gap:5px;max-width:1430px;margin:0 auto;padding:0 44px;align-items:stretch}
.nav-item{background:transparent;color:#555268;display:inline-flex;width:auto;border:0;border-bottom:4px solid transparent;border-radius:0;padding:14px 15px 12px;gap:7px;align-items:center;font-size:12px;white-space:nowrap;font-weight:750;transition:background .15s, color .15s}
.nav-item:hover{background:#efedff;color:var(--indigo)}
.nav-item.active{background:#f0eeff;color:#3532b5;border-bottom-color:var(--indigo);font-weight:850}
.nav-icon{display:inline-grid;place-items:center;width:auto;font:800 9px/1 Arial,sans-serif;color:var(--indigo);letter-spacing:.3px}
.nav-item.active .nav-icon{color:#df6759}.mobile-menu{display:none}
.main-column{display:flex;flex-direction:column;min-height:calc(100vh - 190px)}
.topbar{height:auto;min-height:53px;display:flex;justify-content:space-between;padding:14px max(30px,calc((100vw - 1430px)/2 + 44px));background:var(--paper);border-bottom:1px dashed #ccc4c0}
.breadcrumb{color:#686575;font-size:12px}.breadcrumb>span:first-child{color:#87819a;font-size:10px;font-weight:850;letter-spacing:2px}.breadcrumb strong{color:var(--indigo)}
.top-right{gap:8px;color:#87808b;font-size:11px}.header-dot{color:#e16c56;font-size:15px}
.main-content{width:100%;max-width:1430px;padding:52px 44px 84px;margin:0 auto;flex:1}
.main-footer{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:18px max(30px,calc((100vw - 1430px)/2 + 44px));border-top:2px solid var(--ink);background:#ece8ff;color:#2c2a4e;letter-spacing:1px;font-weight:850}
.main-footer span{color:#6f6a83;font-weight:550;letter-spacing:1.2px;margin:0}.main-footer .footer-edition{margin-left:auto}
/* Banner-like section intros */
.eyebrow{font:850 10px/1.3 Arial,"PingFang TC",sans-serif;letter-spacing:2px;color:var(--indigo);margin-bottom:13px}
.page-heading{position:relative;margin-bottom:30px;align-items:flex-end;gap:20px;border-bottom:2px solid #262641;padding:0 0 26px}
.page-heading:after{content:'✳';position:absolute;right:0;top:-35px;color:var(--coral);font-size:45px;line-height:1;pointer-events:none;transform:rotate(-13deg)}
.page-title-inner{max-width:750px}.page-heading h1{font-family:Arial,"PingFang TC","Microsoft JhengHei",sans-serif;font-weight:900;font-size:clamp(30px,3.3vw,51px);letter-spacing:-1.7px;line-height:1.28;color:var(--ink);margin:0 0 13px}
.page-heading p{color:#716b7b;font-size:13px;line-height:1.8}
.button-bar{gap:10px}.btn{border-radius:99px;border-width:1.5px;font-weight:850;font-size:12px;box-shadow:none;padding:10px 17px}
.btn.primary{background:var(--indigo);border-color:var(--indigo);color:#fff}
.btn.primary:hover{background:#2b30aa;border-color:#2b30aa}
.btn.secondary{color:#3a368a;border-color:#b9b1df;background:var(--card)}
.btn.secondary:hover{color:#242575;background:var(--lilac);border-color:#8279d1}
.btn.soft{background:#ebe8ff;color:#3835a2;border-color:#d0c9fc}
.btn.ghost{color:#4a45c9}
.btn.danger{background:#fff1ef;color:#b13b54;border-color:#e9c0bb}
.btn.small{border-radius:999px;padding:7px 13px}
/* Staggered money cards, magazine-style rather than standard admin cards */
.cards-3,.cards-4{gap:15px}.metric-card{min-width:0;min-height:170px;position:relative;padding:25px 25px 24px;border:1.5px solid #302c4b;border-radius:9px;background:var(--card);box-shadow:4px 4px 0 #e4e0dc}
.metric-card.dark{background:var(--indigo);color:#fff;border:1.5px solid #262641;box-shadow:5px 5px 0 #c9c3ff}
.metric-card.dark:before{content:'';position:absolute;right:-32px;bottom:-57px;width:155px;height:155px;border-radius:50%;border:23px solid #7776fb;opacity:.47}
.cards-3>.metric-card:nth-child(2){background:#ffddd2;box-shadow:5px 5px 0 #f4c5b7}
.cards-3>.metric-card:nth-child(3){background:#e9e6ff;box-shadow:5px 5px 0 #ccc4ff}
.cards-4>.metric-card:nth-child(2n){background:#f9e9c8}
.cards-4>.metric-card:nth-child(3n){background:#ebe8ff}
.metric-label{font-size:11px;font-weight:850;color:#676173;letter-spacing:.4px;margin-bottom:22px}
.metric-card.dark .metric-label{color:#e3e3ff}
.metric-value{font-family:Arial,"PingFang TC",sans-serif;font-size:clamp(22px,2.05vw,33px);font-weight:900;line-height:1.3;letter-spacing:-.8px;white-space:normal;overflow-wrap:anywhere;position:relative;z-index:1}
.metric-sub{font-size:11px;color:#766e7f;margin-top:14px;line-height:1.6}.metric-card.dark .metric-sub{color:#eeeeff}
.metric-corner{top:15px;right:21px;font-size:22px;opacity:.5;color:inherit}
.feature-strip{background:var(--butter);border:1.5px solid #2e2a43;border-radius:9px;padding:21px 24px;box-shadow:4px 4px 0 #f8d081;gap:18px}
.feature-strip .icon{background:var(--coral);color:#292541;border:1px solid #292541;border-radius:50%;font-size:23px;width:44px;height:44px}
.feature-strip h3{color:#343049;font-weight:900}.feature-strip p{color:#605761;font-size:12px;line-height:1.7}
.feature-strip .btn.secondary{background:#fffaf0;border-color:#433c41}
.section-grid{gap:18px;margin-top:24px}
.panel,.setting-card,.project-card{border:1.5px solid #ccc5ca;border-radius:10px;background:var(--card);box-shadow:3px 3px 0 #e8e1da}
.panel{overflow:hidden}.panel-header{padding:24px 25px 0}.panel-body{padding:21px 25px 25px}
.panel h2,.section-title{font-family:Arial,"PingFang TC",sans-serif;font-size:18px;font-weight:900;letter-spacing:-.3px;color:#282944}
.section-title{position:relative;margin:34px 0 17px;padding-left:14px}
.section-title:before{content:'';position:absolute;left:0;top:4px;bottom:2px;width:5px;background:var(--coral);border-radius:3px}
.panel-subtitle,.muted{color:#827b88}.text-btn{font-size:11px;font-weight:850;color:var(--indigo);white-space:nowrap}
.good{color:#3a5db3!important}.bad{color:#ba4a61!important}
.data-table th{background:#f1eeff;color:#615a85;border-bottom:1px solid #d5d0ec;font-size:10px}
.data-table td{border-bottom-color:#eae5e3;color:#302e46}
.transaction-name{color:#2d2a41;font-weight:800}
.tag{border-radius:99px;font-weight:850;background:#eeebef;color:#706778}
.tag.green{background:#e3dfff;color:#4c3baf}.tag.orange{background:#ffe7c2;color:#855029}
.tag.red{background:#ffe0e1;color:#b14a5e}.tag.blue{background:#e7e6ff;color:#4842ae}.tag.gray{background:#efecee;color:#77707b}
.empty-state{padding:44px 20px;color:#827d8a}.empty-state .empty-icon{color:#8d80d9;font-size:34px}.empty-state strong{color:#47435d;font-weight:900}.empty-state p{color:#938c9b}
.input,.select,.textarea{border:1.5px solid #cec7d8;border-radius:8px;color:var(--ink);background:#fffefb;min-height:43px}
.input:focus,.select:focus,.textarea:focus{border-color:#6655e3;box-shadow:0 0 0 3px rgba(102,85,227,.14)}
.form-field label{color:#50496a;font-weight:850}.form-field small{color:#827a92}
.project-card{padding:24px 24px 20px}.project-card h3{color:#282643;font-weight:900;font-size:19px}
.project-card p,.project-caption,.progress-label{color:#837c8c}.project-card .project-amount{font-family:Arial,sans-serif;font-size:24px;font-weight:900;color:var(--indigo)}
.project-card .project-foot{border-top:1px dashed #c8bfca}
.progress-track{background:#e8e4f7}.progress-fill{background:var(--indigo)}
.notice{background:#f2efff;color:#5f5875;border-color:#dbd5ff;border-radius:9px}
.notice.green{background:#edeaff;color:#5143a6;border-color:#d4ceff}
.notice.warn{background:#fff1d2;color:#875b35;border-color:#ebd6b1}
.notice.error{background:#ffe8e3;color:#b04557;border-color:#ebc5bd}
.stat-row{border-bottom:1px dashed #e1d9db}.stat-row .value{color:#3c3a78}
.chart-plot{border-bottom-color:#ddd2d8}.chart-bar.income,.legend-dot.income{background:var(--indigo)}
.chart-bar.expense,.legend-dot.expense{background:var(--coral)}
.category-bar .track{background:#ece9f5}.category-bar .fill{background:#8279ef}.category-bar .value{color:#514d83}
.horizon-hero{background:var(--indigo);color:#fff;border:1.5px solid var(--ink);border-radius:10px;box-shadow:5px 5px 0 #d0c7ff;position:relative;overflow:hidden}
.horizon-hero:after{content:'◎';position:absolute;right:17%;bottom:-102px;color:#8c8bff;font-size:250px;opacity:.25;line-height:1;pointer-events:none}
.horizon-hero .big-number{font-family:Arial,sans-serif;font-weight:900;position:relative;z-index:1}
.horizon-hero p{color:#e4e2ff;position:relative;z-index:1}
.horizon-pill{background:#ffffff24;color:#f7f3ff;border:1px solid #ffffff55;position:relative;z-index:1}
.timeline-item{border-color:#d9d3f7}.timeline-item:before{background:var(--indigo)}.timeline-item h4{color:#3e3b71}.timeline-item p{color:#756e84}
.milestone{border-color:#d5cfe1;border-radius:8px;background:#fffefb}
.milestone .circle{border-color:#8a7fe2}.milestone .circle.done{background:var(--indigo);border-color:var(--indigo)}
.setting-card{padding:25px}.setting-card h3{color:#313055;font-weight:900}.setting-card p{color:#7d778a}
.account-name,.account-amount{color:#323257}.account-type{color:#8c8494}
.review-summary{background:#f0edff;color:#605c77;border-color:#d8d0fe}.review-summary strong{color:var(--indigo)}
.review-history>div{background:#f1eeff;color:#5d5976}
.detail-block h4{color:#4141a2}.detail-block p{color:#696376}.info-line b{color:#363c94}
.stepper>span{background:#e4e0ff;color:#5855af}.stepper>span.on{background:var(--indigo);color:white}
.upload-zone{background:#f3f0ff;border-color:#c7bdfb;color:#5d55a9}
.sample-banner{background:#fff1d4;border-color:#f0d4a7;color:#855d36}
.privacy-callout{color:#7b6c83}.kpi-num{font-family:Arial,sans-serif;color:#433fa1;font-weight:900}
.score-pill{border-color:#aaa0f3;color:#4a3fb5}
.modal-overlay{background:rgba(25,23,52,.68)}.modal{border-radius:14px;border:1px solid #2c2743;box-shadow:10px 10px 0 #20203933;background:#fffdf9}
.modal-header{border-bottom-color:#dbd2dc}.modal-header h2{font-family:Arial,"PingFang TC",sans-serif;font-weight:900;color:#2e2a52}.modal-close{background:#efebff;color:#554baa;border-radius:50%}
.modal-lead{color:#777084}
#toast{background:var(--indigo);border:1px solid #302b4e;border-radius:8px;color:white;box-shadow:5px 5px 0 #ccc3ff}
#toast.error{background:#b64563}
/* Entry cover and vault: contrasting split spread, hand-drawn shapes */
.auth-page{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);min-height:100vh;background:var(--paper)}
.auth-art{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;background:var(--lilac);color:var(--ink);padding:36px clamp(30px,6.2vw,95px)}
.auth-art:before{content:'';position:absolute;width:460px;height:460px;border-radius:50%;background:var(--coral);right:-160px;top:13%;border:2px solid #262641;z-index:0}
.auth-art:after{content:'';position:absolute;width:220px;height:220px;border:35px solid #bab0fb;border-radius:50%;right:13%;bottom:8%;z-index:0;transform:rotate(20deg)}
.auth-edition{position:relative;z-index:1;display:flex;justify-content:space-between;border-bottom:1.5px solid var(--ink);padding-bottom:17px;font:850 10px Arial,sans-serif;letter-spacing:1.4px}
.auth-sticker{position:absolute;z-index:1;right:12%;top:21%;background:var(--butter);border:2px solid var(--ink);width:134px;height:134px;border-radius:50%;display:grid;place-items:center;transform:rotate(12deg);box-shadow:7px 7px 0 #8e85d1}
.auth-sticker>span{font:900 70px Arial,sans-serif;letter-spacing:-5px;color:var(--ink)}.sticker-loop{position:absolute;inset:9px;border-radius:50%;border:2px dashed var(--ink)}
.auth-art-copy{position:relative;z-index:1;margin-top:120px;margin-bottom:65px}
.auth-kicker{font:900 11px Arial,sans-serif;letter-spacing:2.1px;margin-bottom:24px}
.auth-quote{font-family:Arial,"PingFang TC",sans-serif;font-size:clamp(37px,4.5vw,71px);font-weight:900;line-height:1.32;letter-spacing:-2.8px;color:var(--ink)}
.auth-quote em{color:var(--indigo);font-style:normal;font-weight:900}
.auth-art p{position:relative;z-index:1;color:#58516a;font-size:15px;line-height:2.1;font-weight:650;margin-top:29px}
.auth-stamp{position:absolute;right:9%;bottom:20%;z-index:1;transform:rotate(-11deg);font:900 13px/1.4 Arial,sans-serif;letter-spacing:1px;text-align:center;color:var(--ink)}
.auth-art-note{position:relative;z-index:1;bottom:auto;color:#554d79;font:850 10px Arial,sans-serif;letter-spacing:2px;padding-top:13px;border-top:1.5px solid var(--ink)}.auth-art-note span{color:#f2655b;padding:0 9px}
.auth-panel{background:var(--paper);padding:50px 42px;min-height:100vh}.auth-panel-inner{width:min(415px,100%)}
.auth-logo{color:#4b46b9;font-weight:900;font-size:13px;letter-spacing:1.6px;margin-bottom:55px}.auth-logo .tiny-mark{color:var(--coral);font-size:20px}.auth-logo span:not(.tiny-mark){color:#9d95a8}
.auth-panel h1{font-family:Arial,"PingFang TC",sans-serif;font-weight:900;font-size:34px;line-height:1.25;color:var(--ink);margin:0 0 16px}
.auth-panel p{color:#716b7a;font-size:12px;line-height:1.95}
.auth-panel .eyebrow{color:var(--indigo)}
.auth-panel .form-field{margin:17px 0}.auth-panel .btn.primary{margin-top:21px;min-height:48px;font-size:13px}
.auth-footer{border-top:1px dashed #c6bdce;padding-top:24px;margin-top:60px;color:#898092;line-height:2.2;font-size:11px}.auth-lock-symbol{color:var(--coral);font-size:18px}
.switch-auth{color:var(--indigo)}
@media(max-width:1150px){.sidebar-topline{padding:9px 24px}.sidebar-brand{padding:24px}.sidebar nav{padding:0 24px;gap:0}.nav-item{padding:13px 10px;font-size:11px}.main-content{padding:40px 26px 70px}.topbar,.main-footer{padding-left:26px;padding-right:26px}.brand-annotation{font-size:10px}.cards-3{gap:12px}.metric-card{padding:21px 18px}}
@media(max-width:850px){.sidebar{position:relative;left:auto;top:auto;box-shadow:none}.sidebar.open{left:auto}.sidebar nav{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;white-space:nowrap;-webkit-overflow-scrolling:touch}.nav-item{flex-shrink:0}.topbar{min-height:45px}.section-grid{grid-template-columns:1fr}.auth-page{grid-template-columns:1fr}.auth-art{min-height:350px;padding:30px 35px}.auth-art-copy{margin:60px 0 34px}.auth-sticker{top:65px;right:10%;width:80px;height:80px}.auth-sticker>span{font-size:42px}.auth-quote{font-size:clamp(32px,5vw,49px)}.auth-art:before{width:310px;height:310px;top:10%;right:-180px}.auth-art:after{width:115px;height:115px;border-width:17px}.auth-stamp{display:none}.auth-panel{min-height:550px;padding:45px 30px}.auth-logo{margin-bottom:30px}}
@media(max-width:620px){.sidebar-topline{padding:10px 17px;gap:8px;font-size:8px;letter-spacing:.7px}.sidebar-actions{gap:8px}.save-status{font-size:10px}.sidebar-actions .top-date{display:none}.lock-button{padding:6px 8px;font-size:10px}.sidebar-brand{padding:17px 18px 20px;gap:14px}.brand-symbol{height:50px;width:50px;font-size:29px;border-radius:10px}.brand-symbol>span{font-size:18px}.brand-words strong{font-size:30px;letter-spacing:-1.8px}.brand-words small{font-size:10px;letter-spacing:.2px}.brand-annotation{display:none}.sidebar nav{padding:0 12px}.nav-item{padding:13px 12px 11px;gap:6px;font-size:11px}.nav-icon{font-size:9px}.topbar{padding:10px 17px}.top-right{display:none}.main-content{padding:30px 17px 60px}.page-heading{margin-bottom:26px;padding-bottom:19px}.page-heading:after{top:-18px;font-size:28px}.page-heading h1{font-size:31px;letter-spacing:-1px}.page-heading p{font-size:12px}.cards-3,.cards-4{grid-template-columns:1fr}.metric-card{min-height:130px;padding:19px 20px}.metric-label{margin-bottom:9px}.metric-value{font-size:28px}.feature-strip{padding:17px;gap:12px;flex-wrap:wrap}.feature-strip .btn{width:100%;margin-left:0}.panel-header{padding:20px 17px 0}.panel-body{padding:17px}.section-title{margin-top:28px}.project-card{padding:18px}.horizon-hero{padding:23px}.horizon-hero .big-number{font-size:30px}.form-grid,.map-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.main-footer{padding:15px 17px;gap:4px;font-size:10px}.main-footer span{display:none}.auth-art{min-height:330px;padding:23px 24px}.auth-edition{font-size:8px}.auth-sticker{right:9%;top:65px}.auth-kicker{font-size:9px}.auth-quote{font-size:35px;letter-spacing:-1.5px}.auth-art p{font-size:12px;margin-top:18px}.auth-art-note{font-size:8px;letter-spacing:.7px}.auth-art-copy{margin:70px 0 18px}.auth-panel{padding:40px 23px;min-height:530px}.auth-panel h1{font-size:28px}.auth-footer{margin-top:42px}.modal{max-height:94vh}.modal-header{padding:17px}.modal-body{padding:17px}.chart-plot{gap:4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}