@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap'); :root{--bg:#f6f7f3;--paper:#fff;--ink:#233b34;--muted:#87918a;--green:#204c3e;--line:#e8ebe4;--lime:#dfebc8;--orange:#cd8557;--radius:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans','Noto Sans TC',sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #adbe88;outline-offset:3px}a{color:inherit;text-decoration:none}button{color:inherit}svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2,h3,p{margin-top:0}h1{font-size:29px;letter-spacing:-1px;margin-bottom:8px;font-weight:700}h2{font-size:17px;margin-bottom:0}h3{font-size:15px}small{font-size:11px}.muted{color:var(--muted);line-height:1.8}.sidebar{position:fixed;inset:0 auto 0 0;width:244px;background:#fff;border-right:1px solid var(--line);padding:32px 22px 0;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:11px;font-size:23px;font-weight:700;letter-spacing:-.8px;padding:0 6px}.brand small{display:block;font-size:10px;font-weight:500;letter-spacing:2px;color:#92988d;margin-top:5px}.brand-icon{background:#204738;border-radius:13px;color:#e4edcf;width:43px;height:43px;font-family:Georgia,serif;font-size:36px;line-height:41px;text-align:center;position:relative}.brand-icon>span{position:absolute;font-size:16px;right:3px;top:-10px;color:#d2a070}.workspace{display:flex;align-items:center;gap:10px;padding:14px 10px;border:1px solid var(--line);border-radius:10px;margin:35px 0 31px;font-size:12px;font-weight:600}.workspace small{display:block;font-size:8px;letter-spacing:1px;margin-top:5px;color:var(--muted)}.workspace-icon{background:#f0f1e8;padding:8px;border-radius:8px;font-size:12px}.online-dot{width:6px;height:6px;background:#78a279;border-radius:50%;margin-left:auto}.nav-label{font-size:9px;letter-spacing:2px;color:#9a9f96;padding-left:14px;margin-bottom:13px}.nav-item{display:flex;align-items:center;gap:13px;width:100%;background:none;border:0;border-radius:9px;padding:13px 15px;text-align:left;color:#7c877d;font-size:13px;margin-bottom:6px;min-height:46px}.nav-item.active{background:#edf2e7;color:#365441;font-weight:700}.nav-item:hover{background:#f3f5ef}.nav-item .nav-count{margin-left:auto;border-radius:5px;background:#dbe6ce;font-size:10px;padding:2px 7px}.sidebar-bottom{margin-top:auto;padding-top:30px}.sidebar-note{padding:19px 15px;background:#f8f8f2;border-radius:12px;margin-bottom:22px}.sidebar-note>span{color:#a9ae7d;display:block;font-size:24px;margin-bottom:10px}.sidebar-note strong{font-size:12px;font-weight:500}.sidebar-note p{font-size:10px;color:#9a9c8c;margin:8px 0 0}.profile{border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:22px 3px;font-size:12px}.profile small{display:block;color:#9ba297;font-size:9px;margin-top:4px}.avatar{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#e9ebdb;color:#697057;font-weight:700}.avatar.small{width:30px;height:30px;font-size:11px}.app-shell{margin-left:244px}.topbar{height:77px;border-bottom:1px solid var(--line);background:#fff9;display:flex;align-items:center;justify-content:space-between;padding:0 40px}.breadcrumb{font-size:11px;color:#969c92;display:flex;gap:15px}.breadcrumb strong{font-weight:500;color:#5f6c61}.topbar-right{display:flex;align-items:center;gap:22px}.today{font-size:11px;color:#848d81}.connection{font-size:10px;color:#77916b}.connection:before{content:'';display:inline-block;width:5px;height:5px;background:currentColor;border-radius:50%;margin-right:6px}main{padding:32px 40px;max-width:1560px;margin:auto;min-height:calc(100vh - 140px)}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px;gap:20px}.page-head p{font-size:12px;color:#959d90;margin:0;line-height:1.8}.head-actions{display:flex;gap:9px;align-items:center}.btn{border:1px solid #e0e5db;border-radius:8px;background:#fff;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12px;min-height:39px;white-space:nowrap}.btn svg{width:15px;height:15px}.btn:hover{background:#f0f3e9}.btn.primary{background:var(--green);border-color:var(--green);color:#fff}.btn.primary:hover{background:#163b30}.btn.soft{background:#edf2e6;border:0;color:#4f6642}.btn.text{border:0;background:none;color:#8b9680;padding:5px}.btn.danger-text{border:0;background:none;color:#a95e50}.icon-btn{display:grid;place-items:center;min-width:36px;min-height:36px;border:0;background:transparent;color:#929b8d;font-size:25px;border-radius:8px}.icon-btn:hover{background:#eef1e7}.hero{display:grid;grid-template-columns:1fr 220px;background:#eaf0df;border:1px solid #e2e9d6;border-radius:var(--radius);padding:29px 31px;position:relative;overflow:hidden;min-height:170px;margin-bottom:25px}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2.4px;color:#849372;margin-bottom:14px}.hero h2{font-size:24px;letter-spacing:.2px;font-weight:600;margin-bottom:12px}.hero p:not(.eyebrow){color:#8a957f;font-size:12px;margin-bottom:0;line-height:1.8}.hero-art{position:relative;display:flex;justify-content:center;align-items:center;transform:rotate(-9deg)}.ticket{background:#fdfef7;box-shadow:0 12px 20px #7b8d6c14;border:1px solid #dce5cf;border-radius:9px;width:150px;min-height:91px;position:relative;display:flex;align-items:center;padding:18px;gap:18px}.ticket:after{content:'';position:absolute;left:47px;top:0;bottom:0;border-left:1px dashed #d7dfcb}.ticket svg{width:22px;height:22px;color:#abbc8c}.ticket b{font-size:12px;display:block;letter-spacing:1px}.ticket small{font-size:8px;color:#a2ad95;display:block;margin-top:7px;letter-spacing:1.5px}.hero-art .spark{position:absolute;right:13px;top:10px;color:#91a36e;font-size:25px}.hero-art:after{content:'✧';position:absolute;bottom:6px;left:15px;color:#b0bc91;font-size:31px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:28px}.stat{padding:21px 23px;background:#fff;border:1px solid var(--line);border-radius:13px}.stat-top{display:flex;justify-content:space-between;align-items:center;color:#8a9486;font-size:11px}.stat-icon{background:#f1f4eb;border-radius:7px;padding:7px;display:flex;color:#93a17f}.stat-icon svg{width:17px;height:17px}.stat strong{display:block;font-size:31px;letter-spacing:-1px;font-weight:500;margin:10px 0 8px}.stat strong small{font-size:12px;letter-spacing:0;color:#a6ad9f;font-weight:400;margin-left:6px}.stat-foot{font-size:9px;color:#adb3a6}.stat-foot em{font-style:normal;color:#79936c;margin-right:5px}.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:23px}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:23px}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:23px 24px 20px;gap:8px}.panel-title{display:flex;gap:9px;align-items:center}.panel-title h2{font-size:15px}.pill-count{font-size:9px;padding:3px 7px;color:#8b9978;background:#f1f4e9;border-radius:5px}.panel-head p{font-size:10px;color:#a6ad9f;margin:6px 0 0}.filters{display:flex;gap:17px;border-bottom:1px solid var(--line);padding:0 24px}.filter{background:none;border:0;color:#a2a99a;padding:0 0 14px;font-size:11px;position:relative;min-height:35px}.filter.active{color:#456342;font-weight:600}.filter.active:after{content:'';height:2px;background:#70875b;position:absolute;bottom:-1px;left:0;right:0}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{font-size:9px;font-weight:400;color:#a4ac9d;background:#fbfcf9;padding:14px 20px}td{padding:18px 20px;border-top:1px solid #f0f2ec;font-size:11px;color:#737f6b}th:first-child,td:first-child{padding-left:24px}td .title{font-size:12px;color:#3c4e3a;font-weight:600;display:block;max-width:230px;overflow:hidden;text-overflow:ellipsis}td small{display:block;color:#a6ad9f;margin-top:5px;font-size:9px}.event-cell{display:flex;gap:11px;align-items:center}.event-art{width:36px;height:43px;flex-shrink:0;border-radius:6px;background:#eaeedd;display:grid;place-items:center;color:#8e9b72}.event-art.tone-1{background:#eee7df;color:#b18e6d}.event-art.tone-2{background:#e7eaf1;color:#8696ad}.event-art.tone-3{background:#efe7eb;color:#b2909d}.event-art svg{width:18px}.badge{display:inline-flex;align-items:center;gap:5px;border-radius:5px;padding:5px 8px;font-size:9px;white-space:nowrap;background:#eef3e5;color:#7a9461}.badge:before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor}.badge.won{background:#e6f2ed;color:#648f7a}.badge.lost,.badge.cancelled{background:#f2eee9;color:#aa9988}.badge.unpaid{background:#fbf0e1;color:#bc9967}.badge.paid{background:#edf1e6;color:#82936b}.table-bottom{padding:16px 24px;border-top:1px solid var(--line);font-size:9px;color:#a8ae9f;display:flex;justify-content:space-between}.table-bottom button{font-size:10px}.schedule{padding:0 23px 8px}.schedule-row{display:flex;gap:14px;position:relative;padding-bottom:22px}.schedule-date{border-right:1px solid #e5e9df;width:40px;flex-shrink:0;padding-right:13px;text-align:center;position:relative}.schedule-date:after{content:'';position:absolute;right:-3px;top:7px;width:5px;height:5px;border-radius:50%;background:#a3b38c;border:2px solid #fff;box-sizing:content-box}.schedule-date small{color:#a6ae9d;font-size:8px}.schedule-date strong{display:block;font-size:20px;font-weight:500;color:#778b62;margin-top:2px}.schedule-info{min-width:0;padding-top:1px}.schedule-info strong{font-size:11px;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:175px}.schedule-info p{font-size:9px;color:#a5ad9d;margin:7px 0 8px}.schedule-info .badge{font-size:8px;padding:3px 6px}.note-card{background:#eeeade;border:1px solid #e8e3d5;padding:22px;border-radius:14px}.note-card .eyebrow{color:#ae9e7a;font-size:8px}.note-card h3{font-size:14px;font-weight:500;color:#83765b;margin-bottom:10px}.note-card p{font-size:10px;line-height:1.9;color:#a99d86;margin-bottom:16px}.note-card .btn{background:#ffffff70;border:0;color:#96876b;font-size:10px;min-height:30px;padding:7px 10px}.demo-banner{display:flex;align-items:center;justify-content:space-between;padding:10px 17px;background:#fbefd9;color:#a17a41;border-radius:9px;margin-bottom:20px;font-size:11px;gap:12px}.demo-banner button{font-size:10px;background:white;border:0;padding:7px 10px;border-radius:6px;color:#8d774c}.search-bar{display:flex;gap:12px;margin-bottom:22px}.search{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 14px;flex:1;color:#a1aa98}.search input{border:0;background:none;min-height:44px;width:100%;outline:none;font-size:12px}.search-bar>select{width:150px}.list-card{display:none}.empty{padding:40px 24px;text-align:center;color:#9aa48f;font-size:12px;line-height:1.9}.empty>svg{width:34px;height:34px;display:block;margin:0 auto 15px;color:#a8b89a}.empty strong{color:#617653;font-size:15px;display:block;margin-bottom:7px}.empty .btn{margin-top:16px}.calendar-controls{display:flex;align-items:center;gap:16px}.calendar-controls strong{min-width:112px;text-align:center}.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--line);gap:1px;border-top:1px solid var(--line)}.day-label{background:#fbfcf9;text-align:center;padding:13px;font-size:11px;color:#9ca793}.day{background:#fff;min-height:125px;padding:12px 9px}.day.muted-day{background:#fafbf7;color:#c5caba}.day-num{display:grid;place-items:center;width:27px;height:27px;font-size:12px;margin-bottom:7px}.day.current .day-num{background:var(--green);color:#fff;border-radius:50%}.calendar-event{font-size:9px;display:block;background:#eff3e6;border:0;border-left:2px solid #9ba97c;border-radius:3px;padding:6px;width:100%;text-align:left;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7b8a65}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.template-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}.template-art{height:130px;background:#e7ecdc;display:flex;align-items:center;justify-content:center;position:relative}.template-art svg{width:45px;height:45px;color:#a4b28b;stroke-width:1}.template-art:before,.template-art:after{content:'✧';position:absolute;color:#b5c19f;font-size:25px;left:25%;top:25%}.template-art:after{left:auto;right:26%;top:55%;font-size:16px}.template-card:nth-child(2) .template-art{background:#efe7db}.template-card:nth-child(3) .template-art{background:#e3e8ee}.template-body{padding:23px}.template-body p{color:#a0a993;font-size:11px;line-height:1.9;margin:12px 0 21px}.template-body .btn{width:100%}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.settings-body{padding:0 25px 25px;color:#95a089;font-size:12px;line-height:1.9}.settings-body .btn{margin:8px 6px 0 0}.settings-body h3{font-size:12px;color:#617653;margin:20px 0 8px}.settings-body ul{padding-left:18px}.finance-chart{height:230px;display:flex;align-items:stretch;padding:20px 25px 30px;gap:12px}.chart-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;min-width:0;gap:9px;color:#9da68f;font-size:9px}.chart-col small{font-size:8px;white-space:nowrap}.bar{width:100%;max-width:34px;background:#becda5;border-radius:5px 5px 0 0;min-height:2px}.chart-note{padding:0 25px 20px;font-size:10px;color:#a0a993}.spacer{flex:1}footer{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#a9afa2;padding:0 40px 22px}footer span:last-child{font-size:8px;letter-spacing:1.5px}.mobile-nav{display:none}dialog{border:1px solid var(--line);padding:0;border-radius:18px;max-width:680px;width:calc(100% - 32px);max-height:90dvh;box-shadow:0 25px 100px #162c3930;color:var(--ink)}dialog::backdrop{background:#1e352e65;backdrop-filter:blur(3px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:25px 28px;border-bottom:1px solid var(--line)}.dialog-head .eyebrow{margin-bottom:7px}.dialog-head h2{font-size:21px}.form-body{padding:22px 28px;max-height:calc(90dvh - 185px);overflow:auto}.form-section-title{font-size:13px;font-weight:600;margin:5px 0 18px;display:flex;align-items:center;gap:8px}.form-section-title:not(:first-of-type){margin-top:26px}.form-section-title span{font-size:9px;background:#edf2e5;color:#849570;padding:5px;border-radius:5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:block;font-size:11px;color:#87947b;margin-bottom:16px}label em{font-style:normal;color:#bc946f}.form-grid label{margin-bottom:0}.full{grid-column:1/-1}input,textarea,select{border:1px solid #e1e7d9;border-radius:7px;padding:11px 12px;background:#fff;color:#53634a;min-width:0}label input,label textarea,label select{display:block;width:100%;margin-top:8px}input:focus,select:focus,textarea:focus{outline:2px solid #b8cba3;outline-offset:1px}input::placeholder,textarea::placeholder{color:#b0b7a8;font-size:11px}label.full:has(textarea){margin-top:18px}.dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:18px 28px;border-top:1px solid var(--line);background:#fbfcf9}.toast{position:fixed;bottom:30px;left:calc(50% + 122px);transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#284b3e;color:#f1f6e9;padding:13px 23px;border-radius:10px;box-shadow:0 10px 35px #1a322c20;transition:.2s;z-index:100;font-size:12px;max-width:90vw}.toast.show{opacity:1;transform:translate(-50%,0)}#login{max-width:470px}#login-error{font-size:12px;color:#b36d56}.help-box{background:#f6f8ef;padding:16px;border-radius:9px;margin-top:20px;font-size:11px;line-height:1.9;color:#8b977d}.calendar-legend{font-size:11px;color:#97a18e;padding:20px 24px}.loading{padding:100px 30px;text-align:center;color:#99a68d}.mobile-cards{display:none} @media(min-width:1500px){main{padding-top:40px}.hero{min-height:180px}.stat{padding:24px}.content-grid{grid-template-columns:minmax(0,1fr) 315px}} @media(max-width:1200px){.sidebar{width:215px;padding:28px 16px 0}.app-shell{margin-left:215px}.brand{font-size:21px}.topbar{padding:0 27px}main{padding:28px 27px}.content-grid{grid-template-columns:minmax(0,1fr) 250px;gap:17px}.stat{padding:17px}.stats{gap:12px}td,th{padding:17px 13px}td .title{max-width:150px}.schedule{padding:0 17px 6px}.schedule-info strong{max-width:148px}.sidebar-note{padding:17px 10px}footer{padding:0 27px 20px}.toast{left:calc(50% + 107px)}} @media(max-width:1000px){.content-grid{grid-template-columns:1fr}.aside-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.stats{grid-template-columns:repeat(4,1fr)}.stat strong{font-size:27px}.stat-top{font-size:10px}.stat-icon{padding:5px}.template-grid{grid-template-columns:1fr 1fr}.settings-grid{grid-template-columns:1fr}.today{display:none}} @media(max-width:760px){.sidebar{display:none}.app-shell{margin-left:0}.topbar{height:62px;padding:0 20px}.topbar-right{gap:12px}.breadcrumb{font-size:10px;gap:10px}main{padding:25px 20px 10px;min-height:calc(100vh - 155px)}h1{font-size:25px}.page-head{align-items:flex-start;gap:10px;margin-bottom:23px}.page-head p{font-size:10px;max-width:210px}.head-actions>.btn:not(.primary){display:none}.head-actions .btn{padding:9px 12px;font-size:11px}.hero{padding:25px 21px;grid-template-columns:1fr 100px;min-height:152px;margin-bottom:19px}.hero h2{font-size:20px}.hero p:not(.eyebrow){font-size:10px;max-width:210px}.hero .eyebrow{font-size:8px}.hero-art{transform:rotate(-12deg) translateX(8px)}.ticket{width:89px;min-height:73px;padding:10px;gap:10px}.ticket:after{left:30px}.ticket svg{width:15px}.ticket b{font-size:8px}.ticket small{font-size:6px;letter-spacing:0}.hero-art .spark{right:-8px;top:-10px}.hero-art:after{left:0;bottom:-6px;font-size:20px}.stats{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.stat{padding:17px 18px}.stat strong{font-size:29px;margin:7px 0}.stat-top{font-size:11px}.stat-foot{font-size:9px}.stat-icon{padding:6px}.panel-head{padding:20px 19px}.filters{padding:0 19px;gap:22px;overflow:auto}.filter{flex-shrink:0;font-size:10px}.overview-table,.commission-table{display:none}.mobile-cards{display:block}.commission-card{padding:18px 19px;border-bottom:1px solid var(--line);width:100%;background:#fff;border-left:0;border-right:0;border-top:0;text-align:left;display:block}.card-top{display:flex;align-items:center;gap:11px}.card-title{flex:1;min-width:0}.card-title strong{font-size:12px;font-weight:600;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.card-title small{font-size:9px;color:#a1aa96;display:block;margin-top:5px}.card-details{display:flex;gap:13px;align-items:center;margin-top:15px;padding-left:47px;font-size:10px;color:#8f9c81}.card-details span:last-child{margin-left:auto}.aside-panels{display:block}.schedule-info strong{max-width:240px}.schedule{padding:0 23px}.note-card{margin-bottom:23px}.search-bar{gap:8px}.search-bar>select{width:105px;font-size:11px;padding:10px 7px}.search{padding:0 10px}.search input{font-size:11px}.template-grid{grid-template-columns:1fr}.template-art{height:125px}.calendar{gap:1px}.day{min-height:93px;padding:5px 3px}.day-label{padding:10px 0;font-size:10px}.day-num{font-size:10px;width:24px;height:24px}.calendar-event{font-size:8px;padding:5px 2px}.calendar-controls{gap:5px}.calendar-controls strong{min-width:95px;font-size:13px}.calendar-controls .icon-btn{min-width:28px}.calendar-legend{font-size:9px}.finance-chart{gap:4px;padding:20px 14px}.chart-col small{font-size:6px}.chart-col{font-size:8px}.bar{max-width:21px}.mobile-nav{position:fixed;bottom:0;left:0;right:0;background:#fffffff5;backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-around;padding:9px 7px calc(9px + env(safe-area-inset-bottom));z-index:25}.mobile-nav button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9px;color:#a0aa94;padding:4px 10px;min-width:48px;min-height:44px}.mobile-nav button.active{color:#3c6345}.mobile-nav button svg{width:21px;height:21px}.mobile-nav button.mobile-add{background:#234c3d;color:#fff;border-radius:12px;min-width:45px;margin-top:-22px;box-shadow:0 5px 15px #244b3e25}.mobile-nav .mobile-add svg{width:23px;height:23px}footer{font-size:8px;padding:10px 20px 95px}footer span:nth-child(2){display:none}footer span:last-child{font-size:7px;letter-spacing:1px}.toast{left:50%;bottom:95px;width:max-content;max-width:90vw}.form-grid{gap:14px 12px}.dialog-head{padding:20px}.form-body{padding:20px}.dialog-actions{padding:16px 20px;gap:8px}.dialog-actions .btn{padding:9px 12px}.demo-banner{font-size:10px}.demo-banner button{flex-shrink:0}dialog{max-height:94dvh;border-radius:15px}.form-body{max-height:calc(94dvh - 178px)}.settings-body{padding:0 20px 22px}} @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} /* Blue cat shopping bag brand mark. Keep the original PNG transparency. */ .brand-logo{display:block;width:46px;height:46px;object-fit:contain;flex-shrink:0} .topbar-brand-group{display:flex;align-items:center;gap:11px;min-width:0} .mobile-brand{display:none} @media(max-width:760px){.mobile-brand{display:flex;align-items:center;flex-shrink:0}.mobile-brand img{display:block;width:32px;height:32px;object-fit:contain}.topbar-brand-group{gap:10px}.breadcrumb{gap:7px}} /* Original maohuang logo includes its own wordmark. */ .brand{justify-content:center;padding:0} .brand-logo{width:150px;height:auto;max-width:100%;object-fit:contain} @media(min-width:761px) and (max-height:850px){.sidebar-note{display:none}.workspace{margin-top:22px;margin-bottom:22px}.sidebar-bottom{padding-top:16px}} @media(max-width:760px){.mobile-brand img{width:44px;height:40px;object-fit:contain}} /* maohuang: readable blue and white workspace */ :root{--bg:#f3f6fa;--paper:#fff;--ink:#20364c;--muted:#718398;--green:#008fce;--line:#e1e8f0;--lime:#e6f5fd;--orange:#bb8246;--radius:13px} body{font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC',system-ui,sans-serif;font-size:14px;color:var(--ink);line-height:1.5;background:var(--bg)} .sidebar{width:232px;padding:20px 16px 0;background:#fff;overflow-y:auto} .brand{justify-content:flex-start;gap:12px;padding:0 7px;min-height:85px;flex-shrink:0} .brand-logo{width:82px;height:75px;object-fit:contain;max-width:none} .brand-copy{font-size:16px;line-height:1.7;letter-spacing:.3px;font-weight:700;color:#233a51} .brand .brand-copy small{font-size:11px;letter-spacing:1px;color:#718398;margin-top:2px;font-weight:400} .workspace{margin:17px 0 25px;padding:12px 10px;font-size:13px;background:#f8fafc;border-color:#e6edf4} .workspace small{font-size:9px;color:#7a8b9e;letter-spacing:.7px}.workspace-icon{background:#e3f3fd;color:#0785bb}.online-dot{background:#2c9b79} .nav-label{font-size:10px;letter-spacing:1.5px;color:#8898aa;margin-bottom:9px} .nav-item{font-size:14px;min-height:47px;padding:12px 14px;color:#63768a;gap:12px;margin-bottom:5px} .nav-item.active{background:#e8f5fd;color:#007fb9;font-weight:700}.nav-item:hover{background:#f0f7fc}.nav-item .nav-count{background:#cfeafa;color:#0075a8;font-size:11px} .sidebar-bottom{padding-top:24px}.sidebar-note{display:none}.profile{padding:18px 3px;font-size:13px}.profile small{font-size:11px;color:#7c8da0}.avatar{background:#e4f3fc;color:#0087c2}.avatar.small{font-size:12px} .app-shell{margin-left:232px}.topbar{height:65px;padding:0 32px;background:#fff;border-color:#e4eaf1}.breadcrumb{font-size:12px;color:#8190a1}.breadcrumb strong{color:#425b72}.topbar-right{gap:20px}.connection{font-size:11px;color:#398970}.today{font-size:12px;color:#7a8b9d} main{padding:27px 32px;max-width:1480px;min-height:calc(100vh - 126px)} h1{font-size:27px;font-weight:700;letter-spacing:-.5px;margin-bottom:6px}.page-head{margin-bottom:23px}.page-head p{font-size:13px;color:#7a8a9d;line-height:1.7}.head-actions{gap:10px} .btn{font-size:13px;min-height:41px;padding:10px 15px;border-color:#dce5ef;border-radius:8px;line-height:1.35;gap:8px}.btn svg{display:inline-block;width:16px;height:16px;margin:0;flex-shrink:0}.btn:hover{background:#f0f7fc;border-color:#cbdfea}.btn.primary{background:#008fce;border-color:#008fce;box-shadow:0 3px 7px #008fce12}.btn.primary:hover{background:#007eb7;border-color:#007eb7}.btn.soft{background:#e8f5fd;color:#0086be}.btn.text{color:#2980aa;font-size:12px;box-shadow:none}.btn.danger-text{color:#c16d63} .stats{gap:16px;margin-bottom:20px;grid-template-columns:repeat(4,minmax(0,1fr))}.stat{padding:18px 21px;border-radius:12px;border-color:#e0e8f0;box-shadow:0 2px 5px #18354c03}.stat-top{font-size:13px;color:#6f8194}.stat-icon{background:#eaf6fe;color:#1495cb;border-radius:9px;padding:8px}.stat-icon svg{width:18px;height:18px}.stat:nth-child(2) .stat-icon{background:#fff4e7;color:#ce9a4f}.stat:nth-child(3) .stat-icon{background:#eef0ff;color:#8b90cd}.stat:nth-child(4) .stat-icon{background:#eaf6f1;color:#62a68b}.stat strong{font-family:'DM Sans',system-ui,sans-serif;font-size:33px;font-weight:600;color:#263c52;margin:8px 0 6px;line-height:1.2}.stat strong small{font-family:'Microsoft JhengHei',sans-serif;font-size:12px;color:#7f8fa1}.stat-foot{font-size:11px;color:#8a99a9}.stat-foot em{display:none} .work-summary{display:flex;align-items:center;gap:14px;background:#edf7fd;border:1px solid #d9ecf8;border-radius:11px;padding:16px 19px;margin-bottom:23px}.summary-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#fff;color:#1595ce;flex-shrink:0}.work-summary>div{flex:1;min-width:0}.work-summary strong{display:block;font-size:14px;font-weight:600;color:#2c6688;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.work-summary p{font-size:12px;color:#7291a6;margin:4px 0 0}.work-summary .btn{background:#fff;border-color:#cfe4f2;color:#2485b2;font-size:12px} .content-grid{grid-template-columns:minmax(0,1fr) 300px;gap:22px}.panel{border-color:#e0e8f0;border-radius:13px;margin-bottom:22px;box-shadow:0 2px 5px #18354c02}.panel-head{padding:20px 22px 18px}.panel-title h2,h2{font-size:16px;font-weight:600}.panel-head p{font-size:12px;color:#8b99a9;margin-top:6px}.pill-count{background:#edf4fa;color:#6888a0;font-size:10px;padding:3px 8px} .filters{padding:0 22px;gap:24px;border-color:#e5ecf3}.filter{font-size:12px;color:#8695a5;min-height:39px;padding-bottom:13px}.filter small{font-size:10px;margin-left:3px}.filter.active{color:#008ac4}.filter.active:after{background:#009fdf;height:2px} th{font-size:12px;color:#8a99aa;background:#f9fbfd;padding:13px 16px}td{padding:17px 16px;font-size:13px;color:#667d92;border-color:#edf1f6}th:first-child,td:first-child{padding-left:22px}td .title{font-size:13px;color:#304a62;font-weight:600;max-width:260px}td small{font-size:11px;color:#8a9bad;margin-top:4px}.event-art{background:#e8f4fc;color:#60a5ca;width:37px;height:43px}.event-art.tone-1{background:#f9f0e6;color:#c39c73}.event-art.tone-2{background:#eeeffa;color:#9097bc}.event-art.tone-3{background:#f8edf2;color:#c696b0}.event-cell{gap:11px}.badge{font-size:11px;background:#eaf5fd;color:#3891bd;padding:4px 8px;border-radius:5px}.badge.won{background:#e9f5ef;color:#4d9d7a}.badge.lost,.badge.cancelled{background:#f3f4f6;color:#9b9eaa}.badge.paid{background:#e9f5ef;color:#5e9d7e}.badge.unpaid{background:#fff4e5;color:#bf934f}.table-bottom{font-size:11px;padding:12px 22px;border-color:#e5ecf3;align-items:center}.table-bottom .btn{font-size:12px} .empty{padding:27px 20px;font-size:13px;color:#8293a6;line-height:1.8}.empty>svg{width:30px;height:30px;color:#99bdd4;margin:0 auto 12px;display:block}.empty strong{font-size:16px;font-weight:600;color:#506d85;margin-bottom:6px}.empty .btn{margin-top:16px}.empty .btn svg{display:inline-block;width:16px;height:16px;margin:0}.empty-message{margin:0;color:#8293a6;font-size:13px}.empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.empty-start{padding:29px 20px 27px} .schedule{padding:0 22px 5px}.schedule-row{gap:14px;padding-bottom:23px}.schedule-date{border-color:#e0eaf2;width:42px}.schedule-date small{font-size:10px;color:#859db0}.schedule-date strong{font-size:23px;color:#4b95bf}.schedule-date:after{background:#80b8d7}.schedule-info strong{font-size:13px;color:#46647b;max-width:205px}.schedule-info p{font-size:11px;color:#8b9daf}.schedule-info .badge{font-size:10px;padding:3px 7px}.schedule .empty{padding:20px 0 27px;font-size:12px}.note-card{background:#f8fbfd;border:1px solid #e0eaf2;padding:20px;border-radius:13px}.note-card .eyebrow{font-size:10px;letter-spacing:1px;color:#819bad;margin-bottom:12px}.note-card h3{font-size:14px;color:#58768d}.note-card p{font-size:12px;color:#8b9fb0;line-height:1.8;margin-bottom:12px}.note-card .btn{font-size:12px;background:#fff;border:1px solid #dce7f0;color:#5592b4;min-height:35px;padding:8px 12px} .search{border-color:#dce6f0;color:#87a0b5}.search input{font-size:13px;min-height:46px;color:#425f77}.search-bar>select{font-size:13px;width:155px}.search input::placeholder,input::placeholder,textarea::placeholder{font-size:12px;color:#9cabb9} .template-art{background:#e8f4fc;height:120px}.template-art svg,.template-art:before,.template-art:after{color:#90bbd5}.template-body p{font-size:13px;color:#8396a9}.template-body .eyebrow{font-size:10px}.template-body h3{font-size:15px;color:#3b5870}.template-card{border-color:#e0e8f0}.help-box{background:#eff6fb;color:#6d8aa0;font-size:12px;padding:16px;line-height:1.85} .settings-body{font-size:13px;color:#71889d}.settings-body h3{font-size:14px;color:#476b87}.settings-body .btn{margin-top:12px}.calendar{background:#e2eaf2;border-color:#e2eaf2}.day-label{background:#f7faff;color:#6f8ca3;font-size:12px}.day{min-height:115px}.day.muted-day{background:#fafcfe;color:#afbdca}.day-num{font-size:12px}.day.current .day-num{background:#0099da}.calendar-event{font-size:11px;background:#eaf5fd;color:#378eb8;border-left-color:#52b0df;padding:6px}.calendar-legend{font-size:12px;color:#7893a8}.chart-col{font-size:11px;color:#7c94a8}.chart-col small{font-size:10px}.bar{background:#72bce3}.chart-note{font-size:12px;color:#7f94a7} label{font-size:13px;color:#617b91}.form-section-title{font-size:14px;color:#355b78}.form-section-title span{background:#e5f3fd;color:#3e94bd}.dialog-head .eyebrow{font-size:10px;color:#7999b1}input,select,textarea{border-color:#dbe5ef;color:#45637c;font-size:14px}input:focus,select:focus,textarea:focus{outline-color:#8dcdf0}.dialog-actions{background:#f9fbfd;border-color:#e2eaf2}.muted{color:#8095a8}.form-section-title+.full{margin-bottom:17px}.dialog-head{border-color:#e2eaf2}dialog{border-color:#dfe9f3}.toast{background:#245675;left:calc(50% + 116px)} .demo-banner{font-size:12px;background:#fff5e5;color:#a88448}.demo-banner button{font-size:12px}.eyebrow{color:#8ca1b2}footer{font-size:11px;color:#93a2b0;padding:0 32px 20px}footer span:last-child{font-size:9px;letter-spacing:1px} @media(min-width:1500px){main{padding-top:29px}.stat{padding:20px 23px}.content-grid{grid-template-columns:minmax(0,1fr) 310px}} @media(max-width:1200px){.sidebar{width:220px;padding:18px 14px 0}.app-shell{margin-left:220px}main{padding:25px 25px}.topbar{padding:0 25px}.brand-logo{width:77px;height:70px}.brand-copy{font-size:15px}.brand{gap:9px}.content-grid{grid-template-columns:minmax(0,1fr) 270px;gap:18px}.stat{padding:17px}.stat-top{font-size:12px}.stat-foot{font-size:10px}.stats{gap:12px}.toast{left:calc(50% + 110px)}td .title{max-width:190px}footer{padding-right:25px;padding-left:25px}} @media(max-width:1050px){.content-grid{grid-template-columns:1fr}.aside-panels{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.stat-top{font-size:12px}.stat strong{font-size:30px}.stat-icon{padding:6px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.sidebar{display:none}.app-shell{margin-left:0}.topbar{height:65px;padding:0 16px}.mobile-brand img{width:48px;height:44px}.topbar-brand-group{gap:11px}.breadcrumb{font-size:11px;gap:7px}.topbar-right{gap:11px}.connection{font-size:10px}.today{display:none}.avatar.small{width:28px;height:28px}main{padding:23px 16px 12px;min-height:calc(100vh - 151px)}h1{font-size:25px}.page-head{gap:12px;margin-bottom:20px;align-items:flex-start}.page-head p{font-size:12px;max-width:205px}.head-actions .btn{font-size:12px;padding:10px 12px;min-height:40px}.stats{grid-template-columns:1fr 1fr;gap:11px;margin-bottom:16px}.stat{padding:15px}.stat-top{font-size:12px}.stat strong{font-size:31px;margin:9px 0 5px}.stat-foot{font-size:10px;line-height:1.5}.stat-icon{padding:6px}.stat-icon svg{width:16px;height:16px}.work-summary{gap:10px;padding:13px;margin-bottom:18px;flex-wrap:wrap}.summary-icon{width:34px;height:34px}.work-summary strong{font-size:13px;white-space:normal}.work-summary p{font-size:11px}.work-summary .btn{min-height:34px;font-size:11px;padding:8px 11px;margin-left:44px}.content-grid{gap:0}.panel-head{padding:18px 17px}.panel-title h2,h2{font-size:16px}.panel-head p{font-size:12px}.pill-count{font-size:10px}.panel-head .btn.text{font-size:12px}.filters{padding:0 17px;gap:20px}.filter{font-size:12px;min-height:38px}.filter small{font-size:10px}.empty{font-size:13px;padding:26px 17px}.empty strong{font-size:16px}.empty-start{padding:26px 17px}.empty-message{font-size:12px}.empty-actions{gap:8px}.empty-actions .btn{font-size:12px;padding:10px 12px}.table-bottom{font-size:11px;padding:11px 17px}.table-bottom .btn.text{font-size:11px}.aside-panels{display:block}.commission-card{padding:17px;border-color:#e7eef5}.card-title strong{font-size:14px;color:#35536d}.card-title small{font-size:11px;color:#8a9daf}.card-details{font-size:12px;color:#7c93a8;gap:9px;padding-left:0;margin-top:13px}.card-top .badge{font-size:10px}.badge{font-size:11px}.schedule-info strong{font-size:13px;max-width:230px}.schedule-info p{font-size:12px}.schedule-info .badge{font-size:11px}.schedule .empty{font-size:12px;padding-bottom:25px}.note-card{padding:18px}.note-card p{font-size:12px}.note-card .btn{font-size:12px}.search input{font-size:13px}.search-bar>select{width:115px;font-size:12px}.template-grid{grid-template-columns:1fr}.template-body p{font-size:13px}.template-art{height:120px}.settings-body{font-size:13px}.help-box{font-size:12px}.calendar-controls strong{font-size:14px}.calendar-event{font-size:9px;padding:5px 2px}.day{min-height:94px;padding:5px 3px}.day-label{font-size:11px}.day-num{font-size:11px}.calendar-legend{font-size:11px;padding:15px 17px}.chart-col{font-size:9px}.chart-col small{font-size:7px}.chart-note{font-size:11px}.mobile-nav{border-color:#dfe9f2;box-shadow:0 -3px 14px #233b5205}.mobile-nav button{font-size:10px;color:#8397ab}.mobile-nav button.active{color:#008fc9}.mobile-nav button.mobile-add{background:#009bdc;box-shadow:0 4px 12px #009bdc24}.toast{left:50%;font-size:13px}.form-grid{gap:15px 12px}label{font-size:12px}input,select,textarea{font-size:16px}footer{font-size:10px;padding:9px 17px 93px}footer span:last-child{font-size:8px}} @media(max-width:370px){.page-head{flex-wrap:wrap}.page-head p{max-width:none}.head-actions{width:100%}.head-actions .btn.primary{width:100%}.connection{display:none}.stat{padding:13px}.stat-top{font-size:11px}.stat-foot{font-size:10px}.card-details{font-size:11px}} /* Original cardV2 layout and declarations copied from the legacy site. */ .original-commissions{--card:#fff;--text:#111827;--muted:#6b7280;--band:#15616d;--title-font:'Inter','Noto Sans TC',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial;--time-font:var(--title-font);font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans TC',Helvetica,Arial;color:#111827;padding:18px 0} .original-commissions .card-list { display: flex; flex-direction: column; gap: 14px; } .original-commissions .card { display: grid; grid-template-columns: 240px 1fr; gap: 0; background: var(--card); border: 1px solid #d1d5db; border-radius: 18px; padding: 0; overflow: hidden; min-height: 150px; } .original-commissions .cover-frame { position: relative; width: 100%; height: 100%; min-height: 150px; border-radius: 18px 0 0 18px; overflow: hidden; background: #e5e7eb; align-self: stretch; } .original-commissions .cover-frame > .cover { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; max-height: none; border-radius: 0; object-fit: cover; background: #e5e7eb; } .original-commissions .cover-frame.placeholder { background: linear-gradient(135deg,#e5f3ff,#e9ecf1); display: grid; place-items: center; color: #6b7280; font-size: 12px; text-align: center; padding: 8px; } .original-commissions .card-body { position: relative; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; gap: 8px; border-left: none; padding: 0; } .original-commissions .card-body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 56px; background: var(--band, #15616d); border-top-right-radius: 18px; } .original-commissions .content { padding: 4px 12px 4px 12px; } .original-commissions .meta { color: var(--muted); font-size: 13px; } .original-commissions .titlebar { display: flex; align-items: center; gap: 8px; } .original-commissions .badge { background: #111827; color: white; padding: 6px 10px; border-radius: 10px; font-weight: 700; font-size: 12px; } .original-commissions .ribbon { position: relative; z-index: 1; background: transparent; color: #ffffff; padding: 10px 14px; border-radius: 0; font-weight: 900; letter-spacing: .3px; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 22px; font-family: var(--title-font); } .original-commissions .date-line { margin-top:18px; font-weight: 900 !important; font-size: 22px !important; color: var(--text); line-height: 1.15; font-variant-numeric: tabular-nums; font-family: var(--time-font); } .original-commissions .card .date-line { margin-top:14px !important; } .original-commissions .card { min-height: 150px !important; } .original-commissions .card .cover-frame { min-height: 150px !important; } .original-commissions .card.commission-draggable { cursor: grab; touch-action: none; transition: box-shadow 140ms ease, transform 140ms ease, border-color 140ms ease, opacity 140ms ease; } .original-commissions .card.commission-draggable:active { cursor: grabbing; } .original-commissions .card.drag-pressing { transform: scale(.995); box-shadow: 0 12px 28px rgba(15,23,42,.14); border-color: #d1d5db; } .original-commissions .card.dragging { opacity: .96; transform: scale(1.012) rotate(.18deg); box-shadow: 0 24px 52px rgba(15,23,42,.24); border-color: #cbd5e1; z-index: 5; } .original-commissions .commission-drag-ghost { position: fixed !important; margin: 0 !important; pointer-events: none !important; z-index: 10020 !important; opacity: .98; box-shadow: 0 28px 58px rgba(15,23,42,.28); border-color: #cbd5e1 !important; transition: none !important; will-change: transform; } .original-commissions .card.commission-card-moving { transition: transform 180ms cubic-bezier(.2,.8,.2,1); } .original-commissions .card.drag-over-before { box-shadow: 0 -4px 0 #64748b, 0 10px 24px rgba(15,23,42,.08); } .original-commissions .card.drag-over-after { box-shadow: 0 4px 0 #64748b, 0 10px 24px rgba(15,23,42,.08); } .original-commissions body.commission-dragging { user-select: none; cursor: grabbing; } .original-commissions .meta.labeled { display: flex; gap: 6px; font-size: 18px; line-height: 1.35; color: #111827; font-weight: 400 !important; font-family: var(--time-font); } .original-commissions .meta.labeled .label { color: inherit; font-weight: inherit; } .original-commissions .content .meta.labeled:first-of-type .label { display: none; } .original-commissions .content .meta.labeled:first-of-type { margin-top: 16px !important; } .original-commissions .date-line { margin-top:8px; font-weight:800; font-size:16px; color: var(--text); } .original-commissions .btn { appearance: none; border: 1px solid #d1d5db; background: white; color: #111827; padding: 8px 12px; border-radius: 10px; cursor: pointer; font-weight: 600; } .original-commissions .btn:hover { background: #f9fafb; } .original-commissions .btn.primary { background: var(--primary); color: white; border-color: var(--primary); } .original-commissions .btn.primary:hover { background: var(--primary-dark); } .original-commissions .btn.danger { background: #ef4444; color: #fff; border-color: #ef4444; } .original-commissions .btn.danger:hover { background: #dc2626; border-color: #dc2626; } .original-commissions .actions { display: flex; gap: 8px; align-items: center; justify-self: end; align-self: end; margin: 2px 8px 8px 0; } .original-commissions .content .meta.labeled + .meta.labeled { margin-top: 8px !important; } .original-commissions .content .meta.labeled:first-of-type + .meta.labeled { margin-top: 12px !important; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled { margin-top: 16px !important; } .original-commissions .content .date-line + .meta.labeled .label { display: none !important; } .original-commissions .content .date-line + .meta.labeled { align-items: center; } .original-commissions .content .date-line + .meta.labeled::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBhcmlhLWhpZGRlbj0idHJ1ZSI+CiAgPHBhdGggZmlsbD0iIzExMTgyNyIgZD0iTTEyIDJDOC4xNCAyIDUgNS4xNCA1IDljMCA1LjI1IDcgMTMgNyAxM3M3LTcuNzUgNy0xM2MwLTMuODYtMy4xNC03LTctN3ptMCA5LjVjLTEuMzggMC0yLjUtMS4xMi0yLjUtMi41UzEwLjYyIDYuNSAxMiA2LjVzMi41IDEuMTIgMi41IDIuNVMxMy4zOCAxMS41IDEyIDExLjV6Ii8+Cjwvc3ZnPgo=') no-repeat center/contain; opacity: 0.9; } .original-commissions #modal-body .titlebar { display: none; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled { align-items: center; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled .label { margin-right: 3ch; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBhcmlhLWhpZGRlbj0idHJ1ZSI+CiAgPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzQxYjZlNiIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPHBhdGggZD0iTTEyIDZ2Nmw0IDIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzQxYjZlNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==') no-repeat center/contain; opacity: 0.95; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled .label { display: inline !important; font-size: 0; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled .label::after { content: "開賣時間"; font-size: 18px; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled + .meta.labeled { align-items: center; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled + .meta.labeled .label { margin-right: 3ch; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled + .meta.labeled::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBhcmlhLWhpZGRlbj0idHJ1ZSI+CiAgPHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjEwIiByeD0iMiIgcnk9IjIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzQxYjZlNiIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMiIgZmlsbD0iIzQxYjZlNiIvPgogIDxwYXRoIGQ9Ik02IDEyaDJtOCAwaDIiIHN0cm9rZT0iIzQxYjZlNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==') no-repeat center/contain; opacity: 0.95; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled + .meta.labeled .label { display: inline !important; font-size: 0; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled + .meta.labeled .label::after { content: "委託費用"; font-size: 18px; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled + .meta.labeled + .meta.labeled { align-items: center; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled + .meta.labeled + .meta.labeled .label { margin-right: 3ch; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled + .meta.labeled + .meta.labeled::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBhcmlhLWhpZGRlbj0idHJ1ZSI+CiAgPHBhdGggZD0iTTUgMTJoMTR2NGEyIDIgMCAwIDEtMiAySDdhMiAyIDAgMCAxLTItMnYtNHoiIGZpbGw9IiM0MWI2ZTYiLz4KICA8cmVjdCB4PSI3IiB5PSI2IiB3aWR0aD0iMTAiIGhlaWdodD0iNiIgcng9IjIiIHJ5PSIyIiBmaWxsPSJub25lIiBzdHJva2U9IiM0MWI2ZTYiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K') no-repeat center/contain; opacity: 0.95; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled + .meta.labeled + .meta.labeled .label { display: inline !important; font-size: 0; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled + .meta.labeled + .meta.labeled .label::after { content: "實際座位"; font-size: 18px; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled .label { display:inline !important; font-size:0; margin-right: .5ch !important; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled .label::after { content: "開賣時間：" !important; font-size: 18px; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled + .meta.labeled .label { display:inline !important; font-size:0; margin-right: .5ch !important; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled + .meta.labeled .label::after { content: "委託費用：" !important; font-size: 18px; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled + .meta.labeled + .meta.labeled .label { display:inline !important; font-size:0; margin-right: .5ch !important; } .original-commissions .content .date-line + .meta.labeled + .meta.labeled + .meta.labeled + .meta.labeled .label::after { content: "實際座位：" !important; font-size: 18px; } .commission-card-panel{background:transparent;border:0;box-shadow:none;overflow:visible} .commission-card-panel>.filters{background:#fff;border:1px solid #e0e8f0;border-radius:11px;padding-top:13px} .commission-card-panel>.table-bottom{background:#fff;border:1px solid #e0e8f0;border-radius:10px} .commission-card-panel>.empty{background:#fff;border:1px solid #e0e8f0;border-radius:13px;margin-top:18px} main:has(.commission-card-panel){max-width:1384px} .original-commissions .btn{font-size:14px;line-height:normal;display:inline-block;min-height:0;box-shadow:none} .original-commissions .btn:hover{border-color:#d1d5db} .original-compact{padding:16px} .cover-input-help{font-size:11px;color:#91a3b2;margin-top:6px;line-height:1.6}.cover-file-input{padding:9px;background:#f8fbfe;font-size:12px}.form-grid input[type=color]{padding:5px;height:43px;width:100%} @media(max-width:720px){.original-commissions .card{grid-template-columns:180px minmax(0,1fr)}.original-commissions .cover-frame{min-height:150px;border-radius:18px 0 0 18px}} @media(max-width:540px){.original-commissions .card{grid-template-columns:115px minmax(0,1fr)}.original-commissions .ribbon{font-size:17px;padding:13px 10px}.original-commissions .date-line{font-size:16px!important}.original-commissions .content{padding-left:10px;padding-right:10px}.original-commissions .meta.labeled{font-size:14px}.original-commissions .meta.labeled .label::after{font-size:14px!important}.original-commissions .actions{margin-right:8px}.original-commissions .btn{font-size:12px;padding:8px}.original-compact{padding:12px}} /* Wider original cover with a single dashed separator. */ .original-commissions .card{grid-template-columns:320px minmax(0,1fr)} .original-commissions .cover-frame{isolation:isolate} .original-commissions .cover-frame::after{content:'';position:absolute;top:0;bottom:0;right:0;border-right:2px dashed rgba(255,255,255,.92);z-index:2;pointer-events:none;filter:drop-shadow(0 0 1px rgba(0,0,0,.22))} .original-commissions .cover-frame>.cover{z-index:1} .original-commissions.original-compact .card{grid-template-columns:260px minmax(0,1fr)} @media(max-width:1100px){.original-commissions .card{grid-template-columns:280px minmax(0,1fr)}.original-commissions.original-compact .card{grid-template-columns:230px minmax(0,1fr)}} @media(max-width:720px){.original-commissions .card,.original-commissions.original-compact .card{grid-template-columns:210px minmax(0,1fr)}} @media(max-width:540px){.original-commissions .card,.original-commissions.original-compact .card{grid-template-columns:135px minmax(0,1fr)}.original-commissions .cover-frame::after{right:0;border-right-width:1px}} @media(max-width:370px){.original-commissions .card,.original-commissions.original-compact .card{grid-template-columns:120px minmax(0,1fr)}} /* Keep the original card; refine contrast, inner spacing and useful side data. */ .original-commissions .ribbon{display:flex;align-items:center;gap:16px;padding:10px 24px;color:var(--band-ink,#fff)} .original-commissions .ribbon-title{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .original-commissions .ribbon-status{display:inline-flex;flex-shrink:0;line-height:1} .original-commissions .ribbon-status .badge{font-family:'Microsoft JhengHei',sans-serif;font-size:12px;letter-spacing:0;font-weight:500;padding:6px 10px;border-radius:6px;background:#ffffffeb;color:#237caa} .original-commissions .ribbon-status .badge.won{background:#edf8f1;color:#438666}.original-commissions .ribbon-status .badge.lost,.original-commissions .ribbon-status .badge.cancelled{background:#f3f4f6;color:#7d8491} .original-commissions .content{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:24px;padding:4px 24px} .original-commissions .card-client-summary{align-self:center;border-left:1px solid #e8edf2;padding-left:22px;display:flex;flex-direction:column;gap:15px;margin:17px 0 5px;min-width:0} .original-commissions .card-client-summary>div{min-width:0}.original-commissions .card-client-summary span{font-size:12px;color:#8b9bab;display:block;margin-bottom:5px} .original-commissions .card-client-summary strong{display:block;font-size:18px;line-height:1.5;font-weight:600;color:#38566f;overflow-wrap:anywhere} .original-commissions .card-client-summary small{font-size:12px;color:#8d9fae;display:block;margin-top:3px} .original-commissions .card-client-summary .client-quantity{font-size:27px;font-family:'Inter',sans-serif;font-weight:700}.original-commissions .client-quantity small{display:inline;font-size:13px;font-family:inherit;font-weight:400} .original-commissions .actions{margin:8px 24px 14px 0} .order-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:15px 18px;margin:0 0 17px;border:1px solid #bcddec;border-radius:10px;background:#edf8ff;position:sticky;top:0;z-index:15;box-shadow:0 3px 12px #1a4a6210} .order-toolbar strong{font-size:14px;color:#32799d}.order-toolbar p{font-size:12px;margin:4px 0 0;color:#7999ae}.order-toolbar>div:last-child{display:flex;gap:9px;flex-shrink:0} .order-mode .card{position:relative}.card-sort-tools{position:absolute;top:9px;left:8px;z-index:5;display:flex;align-items:center;background:#ffffffef;border:1px solid #d7e3ed;border-radius:8px;box-shadow:0 2px 7px #23435c15;overflow:hidden} .card-sort-tools button{font-size:11px;background:transparent;color:#4f7791;border:0;border-right:1px solid #e3ebf1;min-height:32px;min-width:29px;padding:6px 7px;cursor:pointer}.card-sort-tools button:last-child{border-right:0}.card-sort-tools button:hover{background:#e9f5fd}.card-sort-tools .sort-handle{display:flex;gap:3px;align-items:center;cursor:grab;touch-action:none;user-select:none}.sort-handle span{font-size:19px;line-height:1}.order-dragging{box-shadow:0 7px 20px #198ccc25;outline:2px solid #4db1df;opacity:.8}.order-dragging .sort-handle{cursor:grabbing} .order-mode .actions .btn{pointer-events:none;opacity:.4}.commission-card-panel.order-active>.filters{pointer-events:none;opacity:.55} @media(max-width:1150px){.original-commissions .content{grid-template-columns:1fr;gap:0}.original-commissions .card-client-summary{flex-direction:row;align-items:center;gap:24px;border-left:0;border-top:1px solid #edf1f5;padding:12px 0 0;margin:15px 0 3px}.original-commissions .card-client-summary>div:first-child{flex:1}.original-commissions .card-client-summary strong{font-size:16px}.original-commissions .card-client-summary .client-quantity{font-size:23px}} .original-commissions.original-compact .content{grid-template-columns:1fr;gap:0}.original-compact .card-client-summary{flex-direction:row;align-items:center;gap:20px;border-left:0;border-top:1px solid #edf1f5;padding:12px 0 0;margin:15px 0 3px}.original-compact .card-client-summary>div:first-child{flex:1} @media(max-width:760px){.original-commissions .ribbon{padding-left:16px;padding-right:16px;gap:8px}.original-commissions .ribbon-status .badge{font-size:10px;padding:5px 6px}.original-commissions .content{padding-left:16px;padding-right:16px;grid-template-columns:1fr;gap:0}.original-commissions .card-client-summary{flex-direction:row;align-items:center;gap:18px;border-left:0;border-top:1px solid #edf1f5;padding:12px 0 0;margin:15px 0 3px}.original-commissions .card-client-summary strong{font-size:14px}.original-commissions .card-client-summary span{font-size:11px}.original-commissions .card-client-summary small{font-size:11px}.original-commissions .card-client-summary .client-quantity{font-size:22px}.original-commissions .actions{margin-right:16px;margin-bottom:12px}.head-actions>.btn.order-start{display:inline-flex;font-size:12px}.head-actions:has(.order-start){flex-wrap:wrap;justify-content:flex-end}.order-toolbar{flex-wrap:wrap;gap:12px;padding:12px}.order-toolbar p{font-size:11px}.order-toolbar>div:last-child{margin-left:auto}.card-sort-tools{flex-wrap:wrap;max-width:125px;left:5px;top:5px}.card-sort-tools button{font-size:10px;padding:5px 6px;min-height:29px}.card-sort-tools .sort-handle{flex:1 1 100%;justify-content:center;border-bottom:1px solid #e3ebf1;border-right:0}.card-sort-tools button:not(.sort-handle){flex:1 1 20%}} /* Neutral date and two-line client information. */ .original-commissions .date-line{color:#4b4b4b!important;font-weight:700!important} .original-commissions .content{grid-template-columns:minmax(0,1fr) 220px;gap:28px} .original-commissions .card-client-summary.client-summary-simple{display:flex;flex-direction:column;align-items:flex-start;align-self:start;gap:9px;margin:14px 0 0;padding:0;border:0;border-radius:0;background:transparent;min-width:0} .original-commissions .client-summary-simple>div{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0} .original-commissions .client-summary-simple strong{font-size:16px;line-height:1.5;font-weight:600;color:#555;overflow-wrap:anywhere;min-width:0} .original-commissions .client-summary-simple .client-source{font-size:10px;color:#87929e;background:#f1f4f6;border-radius:4px;padding:2px 6px;margin:0;line-height:1.5;white-space:nowrap;flex-shrink:0;letter-spacing:0} .original-commissions .client-summary-simple .client-meta-line{gap:8px} .original-commissions .client-summary-simple .summary-quantity{font-size:13px;color:#737d87;line-height:1.5;margin:0} .original-commissions .client-summary-simple .client-separator{font-size:12px;color:#bac3cb;margin:0;line-height:1.5} .original-commissions .client-summary-simple .client-payment{font-size:12px;font-weight:400;line-height:1.5;margin:0;padding:0;border:0;background:transparent;border-radius:0} .original-commissions .client-summary-simple .client-payment.is-paid{color:#6b9a83} .original-commissions .client-summary-simple .client-payment.is-unpaid{color:#b38d60} .original-commissions .client-summary-simple .client-payment.is-refunded{color:#919ba6} .original-commissions.original-compact .content{grid-template-columns:1fr;gap:0} .original-commissions.original-compact .card-client-summary.client-summary-simple{margin-top:16px} @media(max-width:1150px){.original-commissions .content{grid-template-columns:1fr;gap:0}.original-commissions .card-client-summary.client-summary-simple{margin-top:16px}} @media(max-width:760px){.original-commissions .card-client-summary.client-summary-simple{gap:7px}.original-commissions .client-summary-simple strong{font-size:14px}.original-commissions .client-summary-simple .summary-quantity{font-size:12px}.original-commissions .client-summary-simple .client-payment{font-size:11px}.original-commissions .client-summary-simple .client-source{font-size:10px}} /* Persistent date sorting selector beside search and channel filter. */ .search-bar{align-items:stretch}.sort-select-label{display:flex;align-items:center;gap:9px;flex-shrink:0;margin:0;font-size:12px;color:#8394a4;white-space:nowrap}.sort-select-label select{width:210px;margin:0;font-size:13px;min-height:46px} @media(max-width:1000px){.search-bar{flex-wrap:wrap}.search-bar .search{flex-basis:calc(100% - 180px)}.sort-select-label{margin-left:auto}} @media(max-width:760px){.search-bar .search{flex-basis:calc(100% - 130px)}.sort-select-label{width:100%;justify-content:flex-end;font-size:11px}.sort-select-label select{width:220px;min-height:40px;font-size:12px}} /* Cover-matched soft backgrounds and hue-related text; layout is unchanged. */ .palette-toggle.palette-is-on{background:#eef7fc;color:#3c819f;border-color:#d8eaf4} .original-commissions .ribbon{font-weight:700} @media(max-width:760px){.head-actions>.btn.palette-toggle{display:inline-flex;font-size:11px;padding:9px 10px}.head-actions:has(.palette-toggle){flex-wrap:wrap;justify-content:flex-end}} /* Plain status text on the original title band. */ .original-commissions .ribbon .ribbon-status .badge{background:transparent;color:var(--band-ink,#fff);border:0;border-radius:0;box-shadow:none;padding:0;margin:0;font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.5px;white-space:nowrap} .original-commissions .ribbon .ribbon-status .badge::before{display:none;content:none} @media(max-width:760px){.original-commissions .ribbon .ribbon-status .badge{font-size:11px;letter-spacing:0}} /* Keep status with requester information instead of isolated on the title band. */ .original-commissions .client-summary-simple .client-state{font-size:12px;line-height:1.5;font-weight:400;color:#7e90a1;margin:0;padding:0;background:transparent;border:0} .original-commissions .client-summary-simple .client-state.state-won{color:#6b9a83} .original-commissions .client-summary-simple .client-state.state-lost,.original-commissions .client-summary-simple .client-state.state-cancelled{color:#969da6} @media(max-width:760px){.original-commissions .client-summary-simple .client-state{font-size:11px}} /* Contact channel colors: keep tags compact and distinct. */ .original-commissions .client-summary-simple .client-source{font-weight:600;padding:2px 7px;line-height:1.6} .original-commissions .client-summary-simple .client-source.channel-line{background:#06c755;color:#fff} .original-commissions .client-summary-simple .client-source.channel-shopee{background:#ee4d2d;color:#fff} .original-commissions .client-summary-simple .client-source.channel-facebook{background:#0866ff;color:#fff} .original-commissions .client-summary-simple .client-source.channel-instagram{background:linear-gradient(35deg,#feda75 0%,#fa7e1e 20%,#d62976 50%,#962fbf 75%,#4f5bd5 100%);color:#fff} .original-commissions .client-summary-simple .client-source.channel-threads,.original-commissions .client-summary-simple .client-source.channel-twitter{background:#000;color:#fff} .original-commissions .client-summary-simple .client-source.channel-other{background:#eef1f4;color:#7a8795} /* Compact date plus one explicit 24-hour text input. */ .datetime-field{min-width:0;margin:0;padding:0;border:0}.datetime-field legend{font-size:13px;color:#617b91;padding:0;margin:0 0 8px}.datetime-inline{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:8px;align-items:center}.datetime-inline input{display:block;width:100%;min-width:0;min-height:43px;margin:0;padding:11px 10px}.clock-time-input{text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.4px}.clock-shared-hint{font-size:11px;line-height:1.7;color:#8a9faf;margin:-4px 0 0}.clock-time-input::placeholder{font-size:13px;color:#a0adba;letter-spacing:.4px} @media(max-width:540px){.datetime-field{grid-column:1/-1}.datetime-field legend{font-size:12px}.datetime-inline{grid-template-columns:minmax(0,1fr) 92px}.datetime-inline input{font-size:16px;min-height:44px}.clock-time-input::placeholder{font-size:16px}.clock-shared-hint{font-size:11px;margin-top:-2px}} /* Make the current page prominent within the workspace breadcrumb. */ .breadcrumb{align-items:center;gap:13px;font-size:12px;color:#8a99a8} .breadcrumb strong{font-size:18px;font-weight:700;line-height:1.4;color:#304a61;letter-spacing:.2px} @media(max-width:760px){.breadcrumb{font-size:10px;gap:8px}.breadcrumb strong{font-size:16px;letter-spacing:0}} /* Per-commission image framing, revealed only when the user expands it. */ .cover-adjuster{border:1px solid #e0e8ef;border-radius:9px;background:#fafcfe;margin:0 0 4px;overflow:hidden}.cover-adjuster summary{cursor:pointer;padding:13px 14px;color:#58758c;font-size:12px;font-weight:500}.cover-adjuster summary>span{font-size:10px;color:#96a7b6;font-weight:400;margin-left:6px}.cover-adjuster[open] summary{border-bottom:1px solid #e8eef4}.cover-adjuster-body{display:grid;grid-template-columns:176px minmax(0,1fr);gap:22px;padding:17px}.cover-preview-frame{width:100%;aspect-ratio:320/310;position:relative;overflow:hidden;background:#eaf0f5;border-radius:8px;display:grid;place-items:center;border:1px solid #e0e8ef}.cover-preview-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:50% 50%}.cover-preview-frame img[hidden]{display:none}.cover-preview-frame>span{font-size:11px;color:#9bafbf;text-align:center;padding:10px}.cover-preview-column>p{font-size:10px;color:#97a9b9;text-align:center;margin:8px 0 0}.cover-position-controls label{margin-bottom:13px;font-size:11px}.cover-position-controls label output{float:right;color:#8099ac;font-variant-numeric:tabular-nums}.cover-position-controls select{font-size:12px;min-height:35px;padding:7px 9px;margin-top:6px}.cover-position-controls input[type=range]{padding:0;border:0;background:transparent;height:18px;margin:7px 0 0;accent-color:#2699ca;cursor:pointer;min-height:0;box-shadow:none}.range-endpoints{display:flex;justify-content:space-between;color:#a3b2bf;font-size:9px;margin-top:3px}.cover-position-controls .btn{font-size:11px;padding:7px 11px;min-height:32px}.cover-position-controls .btn:hover{background:#f0f6fa} @media(max-width:540px){.cover-adjuster-body{grid-template-columns:1fr;padding:14px;gap:15px}.cover-preview-column{width:170px;margin:auto}.cover-adjuster summary>span{display:block;margin:5px 0 0 14px}.cover-position-controls label{font-size:12px}.cover-position-controls select{font-size:16px}.cover-position-controls input[type=range]{height:28px}.range-endpoints{font-size:10px}} /* Keep overview requester details in the upper-right on desktop cards. */ @media(min-width:761px){.original-commissions.original-compact .content{grid-template-columns:minmax(0,1fr) 180px;gap:20px}.original-commissions.original-compact .card-client-summary.client-summary-simple{margin-top:14px;align-self:start}.original-commissions.original-compact .card-main-details{min-width:0}} @media(max-width:760px){.original-commissions.original-compact .content{grid-template-columns:1fr;gap:0}.original-commissions.original-compact .card-client-summary.client-summary-simple{margin-top:16px}} /* Legacy-style monthly bars and cross-year comparison charts. */ .finance-view-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px}.finance-scope-switch{display:inline-flex;gap:3px;background:#e9eff6;padding:4px;border-radius:9px}.finance-scope-switch button{border:0;background:transparent;padding:9px 15px;font-size:12px;color:#7890a6;border-radius:6px;min-height:35px}.finance-scope-switch button.active{background:#fff;color:#2367bd;box-shadow:0 1px 4px #233b5012;font-weight:600}.finance-scope-label{font-size:11px;color:#8a9baa;white-space:nowrap}.finance-chart-panel .panel-head{padding-bottom:8px}.finance-chart-actions{display:flex;gap:18px;align-items:center}.finance-year-label{display:flex;align-items:center;gap:9px;margin:0;font-size:12px;color:#8395a7}.finance-year-label select{margin:0;width:110px;font-size:12px;min-height:36px;padding:7px 10px}.finance-year-total{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;color:#496a85;font-variant-numeric:tabular-nums}.finance-echart{width:100%;height:320px;min-width:0;padding:0;display:block;color:#98a8b7;font-size:13px}.finance-trend-chart{height:340px}.finance-echart>div{max-width:100%} @media(max-width:760px){.finance-view-controls{gap:10px;flex-wrap:wrap;margin-bottom:17px}.finance-scope-switch button{font-size:11px;padding:9px 12px}.finance-scope-label{font-size:10px}.finance-chart-panel .panel-head{flex-wrap:wrap;gap:12px}.finance-chart-actions{gap:12px;flex-wrap:wrap}.finance-year-label{font-size:11px}.finance-year-label select{width:100px}.finance-year-total{font-size:13px}.finance-echart{height:280px}.finance-trend-chart{height:300px}} /* Revenue summary is independent of the year/scope selected in the charts. */ .stat strong .stat-currency{margin-left:0;margin-right:6px}.stats-finance .stat strong{font-size:30px;white-space:nowrap;margin-bottom:0}.stats-finance .stat{padding-bottom:20px} @media(max-width:1200px){.stats-finance .stat strong{font-size:26px}} @media(max-width:760px){.stats-finance .stat strong{font-size:24px}.stats-finance .stat{padding-bottom:17px}.stats-finance .stat strong .stat-currency{font-size:10px;margin-right:4px}} /* Cleaner finance charts: restrained color, softer axes and compact panels. */ .finance-chart-panel{border-color:#e2e9f1;border-radius:15px}.finance-chart-panel .panel-head{padding:23px 25px 9px;min-height:68px}.finance-chart-panel h2{font-size:16px;color:#38546b;font-weight:600}.finance-chart-actions{gap:22px}.finance-year-label select{border-color:#e1e8f0;background:#f9fbfd;min-height:34px;color:#71879b;width:107px;font-size:12px;padding:7px 11px;border-radius:7px}.finance-year-total{display:flex;align-items:baseline;font-size:21px;letter-spacing:-.4px;font-weight:600;color:#36556e;line-height:1.4}.finance-year-total small{font-size:10px;font-weight:400;letter-spacing:0;color:#91a4b4;margin-right:6px}.finance-echart{height:290px}.finance-trend-chart{height:310px} @media(max-width:760px){.finance-chart-panel .panel-head{padding:19px 17px 8px;gap:10px;min-height:61px}.finance-chart-panel h2{font-size:15px}.finance-chart-actions{gap:12px}.finance-year-label select{width:95px;min-height:33px;font-size:11px;padding:7px 8px}.finance-year-total{font-size:17px}.finance-year-total small{font-size:9px;margin-right:4px}.finance-echart{height:260px}.finance-trend-chart{height:280px}} /* Skip layout/paint of distant commission contents while retaining the full list. */ @supports (content-visibility:auto){ .original-commissions:not(.order-mode) .card{content-visibility:auto;contain-intrinsic-block-size:auto 318px} @media(max-width:760px){.original-commissions:not(.order-mode) .card{contain-intrinsic-block-size:auto 520px}} } /* Overview summaries have their own mobile layout; full cards stay in management. */ .overview-mobile-cards{display:none} @media(max-width:760px){ #mobile-nav button{font-size:11px;min-width:0;min-height:46px} #mobile-nav{padding-bottom:calc(8px + env(safe-area-inset-bottom));height:auto;min-height:65px} body{padding-bottom:calc(82px + env(safe-area-inset-bottom))} #main[data-page="overview"]{padding:20px 14px 8px} #main[data-page="overview"] .page-head{align-items:center;flex-wrap:nowrap;margin-bottom:18px} #main[data-page="overview"] h1{font-size:24px;margin:0} #main[data-page="overview"] .head-actions{width:auto} #main[data-page="overview"] .head-actions .btn.primary{width:auto;font-size:13px;min-height:42px;padding:10px 13px} #main[data-page="overview"] .stats{gap:10px;margin-bottom:18px} #main[data-page="overview"] .stat{padding:14px 15px;box-shadow:none} #main[data-page="overview"] .stat-top{font-size:12px;color:#6f8091} #main[data-page="overview"] .stat strong{font-size:29px;margin:6px 0 0;line-height:1.2} #main[data-page="overview"] .stat-icon{padding:5px} #main[data-page="overview"] .stat-icon svg{width:15px;height:15px} #main[data-page="overview"] .work-summary{display:none} #main[data-page="overview"] .content-grid{display:flex;flex-direction:column;gap:0} #main[data-page="overview"] .aside-panels{order:-1;display:block} #main[data-page="overview"] .aside-panels .note-card{display:none} #main[data-page="overview"] .panel{margin-bottom:18px;border-radius:14px;box-shadow:none} #main[data-page="overview"] .panel-head{padding:15px 16px;gap:8px} #main[data-page="overview"] .panel-head h2{font-size:16px} #main[data-page="overview"] .panel-head p{display:none} #main[data-page="overview"] .panel-head .btn{min-height:36px;padding:7px 0} #main[data-page="overview"] .schedule{padding:0 16px 8px} #main[data-page="overview"] .schedule-row{padding:12px 0;gap:12px;border-top:1px solid #edf1f5} #main[data-page="overview"] .schedule-row:nth-child(n+4){display:none} #main[data-page="overview"] .schedule-info{min-width:0;flex:1} #main[data-page="overview"] .schedule-info strong{max-width:none;font-size:13px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #main[data-page="overview"] .schedule-info p{font-size:12px;margin:4px 0 6px} #main[data-page="overview"] .schedule-info .badge{font-size:11px;background:#f0f6fb;color:#597d98} #main[data-page="overview"] .filters{display:flex;overflow-x:auto;gap:19px;flex-wrap:nowrap;padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch} #main[data-page="overview"] .filters::-webkit-scrollbar{display:none} #main[data-page="overview"] .filter{flex-shrink:0;min-height:42px;font-size:12px;padding-bottom:11px} .overview-desktop-cards{display:none} .overview-mobile-cards{display:grid;gap:12px;padding:14px 12px} .overview-ticket{display:block;width:100%;min-width:0;appearance:none;text-align:left;border:1px solid #e2e9ef;border-radius:12px;background:#fff;padding:0;overflow:hidden;color:#345068;font:inherit;box-shadow:0 2px 5px #243e5304} .overview-ticket:active{background:#f5faff} .overview-ticket-main{display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px;padding:14px 12px 12px;border-top:3px solid var(--ticket-accent,#c7c3ca)} .overview-ticket-cover{display:grid;place-items:center;width:70px;height:92px;overflow:hidden;border-radius:7px;background:#edf3f7;color:#92adbf} .overview-ticket-cover img{display:block;width:100%;height:100%;object-fit:cover} .overview-ticket-info{min-width:0;display:flex;flex-direction:column;gap:6px} .overview-ticket-info strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:14px;font-weight:700;line-height:1.5;color:#345068;overflow-wrap:anywhere} .overview-ticket-date{font-size:12px;line-height:1.5;color:#53677a;font-variant-numeric:tabular-nums} .overview-ticket-venue{font-size:12px;line-height:1.5;color:#8a99a7} .overview-ticket-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;border-top:1px solid #edf1f5;background:#fbfcfe} .overview-ticket-client{display:flex;align-items:center;gap:6px;min-width:0;flex:1} .overview-ticket-name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px;color:#526d82} .overview-ticket-quantity{font-size:11px;white-space:nowrap;color:#7c91a2} .overview-ticket .client-source{font-size:9px;border-radius:3px;padding:2px 5px;line-height:1.5;white-space:nowrap;background:#eef1f4;color:#6f8091;flex-shrink:0} .overview-ticket .channel-line{background:#06c755;color:white}.overview-ticket .channel-shopee{background:#ee4d2d;color:white}.overview-ticket .channel-facebook{background:#0866ff;color:white}.overview-ticket .channel-instagram{background:#c13584;color:white}.overview-ticket .channel-threads,.overview-ticket .channel-twitter{background:#222;color:white} .overview-ticket-state{display:inline-flex;align-items:center;gap:4px;font-size:11px;white-space:nowrap;color:#398cbe;flex-shrink:0} .overview-ticket-state.state-won{color:#5e977d}.overview-ticket-state.state-lost,.overview-ticket-state.state-cancelled{color:#909ca6} .overview-ticket-state svg{width:13px;height:13px} #main[data-page="overview"] .table-bottom{padding:10px 16px;font-size:11px} } @media(max-width:360px){.overview-ticket-main{grid-template-columns:58px minmax(0,1fr);gap:10px}.overview-ticket-cover{width:58px;height:84px}.overview-ticket-name{max-width:80px}.overview-ticket-foot{padding-left:10px;padding-right:10px}} /* Full-width information on phones; preserve the desktop ticket layout. */ @media(max-width:760px){ #main[data-page="commissions"]{padding:20px 14px 8px} #main[data-page="commissions"] .page-head{align-items:center;flex-wrap:nowrap;gap:10px;margin-bottom:18px} #main[data-page="commissions"] h1{font-size:24px;margin:0;white-space:nowrap} #main[data-page="commissions"] .head-actions{width:auto} #main[data-page="commissions"] .head-actions [data-action="export"]{display:none} #main[data-page="commissions"] .head-actions .btn.primary{width:auto;min-height:42px;padding:10px 13px;font-size:13px} #main[data-page="commissions"] .search-bar{display:grid;grid-template-columns:minmax(95px,.8fr) minmax(0,1.4fr);gap:10px;align-items:end;margin-bottom:16px} #main[data-page="commissions"] .search-bar .search{grid-column:1/-1;width:100%;min-width:0;flex-basis:auto} #main[data-page="commissions"] .search-bar .search input{min-height:46px;font-size:16px} #main[data-page="commissions"] .search-bar>select{width:100%;min-width:0;min-height:44px;font-size:16px;margin:0;padding:9px 8px} #main[data-page="commissions"] .sort-select-label{display:grid;grid-template-columns:1fr;gap:5px;width:100%;min-width:0;margin:0;white-space:normal;font-size:11px;color:#8295a6} #main[data-page="commissions"] .sort-select-label select{width:100%;min-width:0;min-height:44px;margin:0;font-size:14px;padding:9px 7px} #main[data-page="commissions"] .commission-card-panel>.filters{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:20px;padding:0 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch} #main[data-page="commissions"] .commission-card-panel>.filters::-webkit-scrollbar{display:none} #main[data-page="commissions"] .filter{flex-shrink:0;min-height:46px;padding:13px 0;font-size:12px;white-space:nowrap} #main[data-page="commissions"] .original-commissions{padding:14px 0} #main[data-page="commissions"] .original-commissions .card-list{gap:18px} #main[data-page="commissions"] .original-commissions .card{grid-template-columns:minmax(0,1fr);border:1px solid #dfe7ef;border-radius:14px;background:#fff;contain-intrinsic-block-size:auto 490px;box-shadow:0 2px 8px #243e5305} #main[data-page="commissions"] .original-commissions .cover-frame{height:166px;min-height:166px!important;border-radius:13px 13px 0 0;overflow:hidden;background:#eaf0f5} #main[data-page="commissions"] .original-commissions .cover-frame::after{display:none} #main[data-page="commissions"] .original-commissions .cover-frame.placeholder{height:70px;min-height:70px!important;color:#9baab7;background:#f1f5f8} #main[data-page="commissions"] .original-commissions .card-body{min-width:0;gap:0;grid-template-rows:auto auto auto;border:0} #main[data-page="commissions"] .original-commissions .card-body::before{display:none} #main[data-page="commissions"] .original-commissions .ribbon{display:block;background:var(--band);color:var(--band-ink);height:auto;min-height:0;width:100%;padding:13px 16px;font-size:16px;line-height:1.5;font-weight:700;letter-spacing:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere} #main[data-page="commissions"] .original-commissions .ribbon-title{display:block;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere} #main[data-page="commissions"] .original-commissions .content{display:grid;grid-template-columns:minmax(0,1fr);padding:14px 16px 0;gap:0;min-width:0} #main[data-page="commissions"] .original-commissions .card-main-details{min-width:0} #main[data-page="commissions"] .original-commissions .card .date-line{margin:0 0 12px!important;font-size:18px!important;font-weight:700!important;line-height:1.5;color:#555e68} #main[data-page="commissions"] .original-commissions .meta.labeled{display:grid;grid-template-columns:16px 76px minmax(0,1fr);gap:8px;align-items:start;margin:9px 0!important;font-size:14px;line-height:1.65;color:#4b6275;min-width:0} #main[data-page="commissions"] .original-commissions .meta.labeled::before{margin:3px 0 0;width:14px;height:16px;opacity:.8} #main[data-page="commissions"] .original-commissions .meta.labeled .label{margin:0!important;min-width:0;white-space:nowrap;color:#8394a4} #main[data-page="commissions"] .original-commissions .meta.labeled .label::after{font-size:13px!important;font-weight:400;line-height:1.65} #main[data-page="commissions"] .original-commissions .meta.labeled>span:last-child{min-width:0;overflow-wrap:anywhere} #main[data-page="commissions"] .original-commissions .date-line+.meta.labeled{grid-template-columns:16px minmax(0,1fr);margin:0 0 14px!important;color:#63798b} #main[data-page="commissions"] .original-commissions .card-client-summary.client-summary-simple{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:13px 0 0;margin:14px 0 0;border:0;border-top:1px solid #eaf0f5;min-width:0} #main[data-page="commissions"] .original-commissions .client-name-line{display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0} #main[data-page="commissions"] .original-commissions .client-name-line strong{font-size:14px;line-height:1.5;overflow-wrap:anywhere;color:#4b647a} #main[data-page="commissions"] .original-commissions .client-meta-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;line-height:1.6} #main[data-page="commissions"] .original-commissions .client-summary-simple .summary-quantity{font-size:13px} #main[data-page="commissions"] .original-commissions .actions{display:block;justify-self:stretch;margin:14px 16px 16px} #main[data-page="commissions"] .original-commissions .actions .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;padding:10px 14px;font-size:13px;color:#3f789a;background:#f7fbfd;border-color:#dce9f1;border-radius:8px} #main[data-page="commissions"] .table-bottom{gap:10px;font-size:11px;padding:12px;line-height:1.6} #main[data-page="commissions"] .table-bottom>span:last-child{display:none} } .auth-setup-only[hidden],#password-close[hidden]{display:none!important} #login-hint,#password-hint{font-size:13px;line-height:1.8;color:#8396a6} .account-role{font-size:11px;color:#498b77;background:#eaf6f0;border-radius:6px;padding:5px 9px;white-space:nowrap}.account-role.role-developer{color:#477cad;background:#edf4fc} .account-profile strong{font-size:16px;color:#3b5972}.account-profile p{margin:7px 0 16px}.account-actions{display:flex;gap:10px;flex-wrap:wrap} .account-management{margin-top:20px}.account-management>.settings-body>.muted{margin-top:0}.account-create-form{padding-top:20px;margin-top:22px;border-top:1px solid #e6edf3}.account-create-form h3{margin-bottom:16px}.account-create-form .full{grid-column:1/-1}.account-create-form .muted{font-size:11px}.account-create-form .form-grid{align-items:start} .account-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;border-bottom:1px solid #edf1f6}.account-row>div:first-child{min-width:0}.account-row strong{font-size:13px;overflow-wrap:anywhere;color:#48657c}.account-row small{display:block;margin-top:5px;font-size:11px;color:#8c9eae}.account-row-actions{display:flex;gap:7px;flex-shrink:0}.account-row-actions .btn{font-size:11px;padding:7px 9px;min-height:34px;margin-top:0} #account-create-error,#password-error,#account-reset-error,#login-error{color:#bf6e65;font-size:12px;line-height:1.7} body[data-role="admin"] [data-action="export"],body[data-role="admin"] [data-action="import"],body[data-role="admin"] .aside-panels>.note-card,body[data-role="admin"] [data-palette-toggle],body[data-role="admin"] [data-sort],body[data-role="admin"] [data-discovery="scan"],body[data-role="admin"] [data-discovery="read"],body[data-role="admin"] .discovery-scan-picker{display:none!important} body[data-role="admin"] .mobile-nav{grid-template-columns:repeat(6,1fr)} @media(max-width:540px){.account-row{align-items:flex-start;flex-wrap:wrap;gap:10px}.account-row-actions{margin-left:auto}.account-create-form .form-grid{grid-template-columns:1fr}.account-profile .settings-body,.account-management .settings-body{padding:16px}.account-management{margin-top:16px}.account-actions .btn{min-height:42px}.account-create-form input{font-size:16px}} .account-row-actions{flex-wrap:wrap;justify-content:flex-end} @media(max-width:540px){.account-row-actions{max-width:100%}.account-row-actions .btn{min-height:38px}} .profile-menu-anchor{position:relative;flex-shrink:0} .profile-trigger{appearance:none;padding:0;border:2px solid white;outline:1px solid #dfe9f0;width:38px!important;height:38px!important;overflow:hidden;cursor:pointer;color:#477c9c;font-size:14px;box-shadow:0 1px 5px #2540570a} .profile-trigger:hover{outline-color:#86b9d2}.profile-trigger:disabled{cursor:default;opacity:.65}.avatar img,.profile-menu-avatar img,.profile-avatar-preview img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%} .profile-menu{position:absolute;top:calc(100% + 12px);right:0;z-index:100;width:235px;padding:8px;background:#fff;border:1px solid #e1e9f0;border-radius:13px;box-shadow:0 12px 38px #24425a1a;color:#48647a}.profile-menu[hidden]{display:none!important} .profile-menu-user{display:flex;align-items:center;gap:11px;padding:11px 10px 14px;margin-bottom:5px;border-bottom:1px solid #ecf1f5;min-width:0}.profile-menu-avatar{width:42px;height:42px;border-radius:50%;background:#eaf5fc;color:#4281a4;display:grid;place-items:center;flex-shrink:0;font-weight:600}.profile-menu-user>div{min-width:0}.profile-menu-user strong{display:block;font-size:14px;overflow-wrap:anywhere}.profile-menu-user small{display:block;margin-top:5px;font-size:11px;color:#8a9cab}.profile-menu>button{display:block;width:100%;padding:12px;border:0;text-align:left;background:transparent;border-radius:8px;color:#547187;font-size:13px;min-height:43px}.profile-menu>button:hover,.profile-menu>button:focus-visible{background:#f0f7fc}.profile-menu>button[data-action=logout]{color:#b87368} #profile-dialog{width:min(480px,calc(100% - 28px))}.profile-avatar-editor{display:flex;align-items:center;gap:20px;margin:3px 0 25px;padding-bottom:22px;border-bottom:1px solid #e9eff4}.profile-avatar-preview{display:grid;place-items:center;width:88px;height:88px;flex-shrink:0;border-radius:50%;background:#e9f4fb;color:#4e87a8;font-size:30px;font-weight:600;overflow:hidden}.profile-avatar-buttons{display:flex;gap:8px;flex-wrap:wrap}.profile-avatar-buttons label.btn{margin:0;font-size:12px;cursor:pointer}.profile-avatar-buttons input[hidden]{display:none!important}.profile-avatar-editor p{font-size:10px;color:#91a2b1;margin:9px 0 0;line-height:1.7}.profile-readonly{display:flex;justify-content:space-between;gap:12px;margin-top:16px;padding:12px 0;color:#8295a6;font-size:12px;border-top:1px solid #edf1f5}.profile-readonly strong{font-weight:500;color:#59758c;overflow-wrap:anywhere}#profile-error{color:#bf6e65;font-size:12px;line-height:1.7} @media(max-width:540px){.profile-trigger{width:36px!important;height:36px!important}.profile-menu{width:min(245px,calc(100vw - 32px));top:calc(100% + 10px)}#profile-dialog .form-body{padding:20px 18px}.profile-avatar-editor{gap:15px}.profile-avatar-preview{width:76px;height:76px}.profile-avatar-buttons{gap:6px}.profile-avatar-buttons .btn{font-size:11px;padding:9px;min-height:38px}.profile-avatar-editor p{font-size:10px}#profile-form input[name=displayName]{font-size:16px}} .passkey-login{display:grid;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid #e1e9f1}.passkey-login[hidden]{display:none}.passkey-login .btn{width:100%;min-height:44px}.passkey-login small{font-size:12px;color:#7890a8;line-height:1.7}.passkey-section{border-top:1px solid #e1e9f1;margin-top:24px;padding-top:20px}.passkey-heading{display:flex;gap:12px;align-items:center;justify-content:space-between}.passkey-heading h3{margin:0;font-size:16px}.passkey-section p{line-height:1.7;font-size:12px}.passkey-section a,.passkey-site-panel a{color:#008fce}.passkey-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #edf1f5}.passkey-row strong{font-size:14px;overflow-wrap:anywhere}.passkey-row small{display:block;margin-top:5px;color:#7890a8;font-size:11px}.passkey-row .btn{flex-shrink:0}.passkey-site-panel ol{padding-left:20px;line-height:1.9;font-size:13px}.passkey-site-panel p{line-height:1.7}.funnel-command{font-family:monospace;font-size:12px;width:100%;margin:12px 0}.passkey-site-action{display:flex;align-items:end}#passkey-dialog{max-width:480px}#passkey-action-error,#passkey-site-error{color:#b54747;font-size:13px}#passkey-action-hint{font-size:13px;line-height:1.8;color:#6b8298}@media(max-width:480px){.passkey-heading{flex-wrap:wrap}.passkey-site-action .btn{width:100%}}