@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700&display=swap');
:root{
  --blue:#0b2f8f;--blue2:#1449c9;--blue3:#0c225e;--orange:#ff5b14;--green:#26b44a;--red:#e53935;
  --bg:#f6f8fc;--white:#fff;--text:#14213d;--muted:#69758d;--line:#e3e8f2;
  --shadow:0 14px 34px rgba(22,48,110,.10);--shadow3d:0 14px 28px rgba(22,48,110,.11),0 3px 0 rgba(225,230,240,.92);
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Anuphan","Noto Sans Thai","Segoe UI",sans-serif;color:var(--text);background:linear-gradient(145deg,#fff,#f4f6fb);font-size:16px}
button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:grid;grid-template-columns:270px 1fr}
.sidebar{position:fixed;left:18px;top:18px;bottom:18px;width:244px;border-radius:28px;background:linear-gradient(180deg,#0e3ba6,#071f5c);box-shadow:0 24px 44px rgba(8,34,95,.28);color:#fff;padding:16px;z-index:40;display:flex;flex-direction:column}
.brand-block{padding:5px 5px 14px;border-bottom:1px solid rgba(255,255,255,.14)}.brand-logo{width:100%;height:80px;object-fit:contain;border-radius:15px}.brand-title{text-align:center;margin-top:7px}.brand-title b{display:block;font-size:15px}.brand-title span{display:block;font-size:12px;opacity:.82}
.side-nav{display:grid;gap:5px;margin-top:12px;overflow:auto}.nav-item{position:relative;border:0;background:transparent;color:#eaf0ff;text-align:left;padding:12px 12px;border-radius:13px;display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:9px;font-size:15px}.nav-item:hover{background:rgba(255,255,255,.09)}.nav-item.active{background:#fff;color:var(--blue);box-shadow:0 8px 16px rgba(0,0,0,.14)}.nav-item b{font-weight:600}.nav-badge{font-style:normal;background:#ff3b30;color:#fff;border-radius:99px;min-width:22px;height:22px;display:grid;place-items:center;font-size:11px}
.sidebar-version{margin-top:auto;padding:10px 8px 2px;border-top:1px solid rgba(255,255,255,.14);text-align:left;color:rgba(255,255,255,.9);line-height:1.25}.sidebar-version b{display:block;font-size:11px;letter-spacing:.03em}.sidebar-version span{display:block;font-size:9px;opacity:.66;margin-top:2px}
.side-bottom{margin-top:auto;display:grid;gap:10px}.cloud-card,.eco-card{border-radius:14px;background:rgba(255,255,255,.09);padding:11px}.cloud-card{display:flex;align-items:center;gap:9px}.cloud-card b,.eco-card b{font-size:12px}.cloud-card small,.eco-card small{display:block;font-size:10px;opacity:.76;margin-top:2px}.cloud-dot{width:11px;height:11px;border-radius:50%}.cloud-dot.offline{background:#ffa63d}.cloud-dot.online{background:#44d461;box-shadow:0 0 0 4px rgba(68,212,97,.16)}
.main{grid-column:2;padding:18px 22px 110px 0;min-width:0}.topbar{position:sticky;top:18px;z-index:25;min-height:96px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow3d);padding:18px 22px;display:flex;align-items:center;justify-content:space-between}.topbar-left{display:flex;gap:12px;align-items:center}.topbar h1{font-size:27px;margin:0;color:var(--blue3)}.topbar p{font-size:13px;color:var(--muted);margin:5px 0 0}.topbar-actions{display:flex;align-items:center;gap:9px}
.icon-btn,.search-btn,.primary-btn,.orange-btn,.soft-btn,.panel-link,.more-btn,.notify-chip{border:0;border-radius:12px;font-weight:700}.icon-btn{position:relative;background:#fff;border:1px solid var(--line);width:43px;height:43px}.badge-dot{position:absolute;right:-5px;top:-6px;background:#ef3333;color:#fff;border-radius:99px;min-width:20px;height:20px;display:grid;place-items:center;font-size:10px;font-style:normal}.search-btn{height:43px;padding:0 16px;background:#fff;border:1px solid var(--line);color:#8a94a8;display:flex;gap:8px;align-items:center;min-width:220px;text-align:left}.primary-btn{padding:11px 15px;background:linear-gradient(180deg,var(--blue2),var(--blue));color:#fff;box-shadow:0 7px 16px rgba(11,47,143,.21)}.orange-btn{padding:12px 16px;background:linear-gradient(180deg,#ff741f,#f5520d);color:#fff;box-shadow:0 8px 18px rgba(255,91,20,.23)}.soft-btn{padding:10px 13px;background:#fff;border:1px solid var(--line);color:var(--blue)}.mobile-only{display:none}
.page{display:none;padding-top:20px}.page.active{display:block}.hero-mobile{display:none}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.metric-card{border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow3d);padding:17px;text-align:left;color:var(--text);display:grid;grid-template-columns:52px 1fr;column-gap:12px;align-items:center}.metric-icon{grid-row:1/5;width:52px;height:52px;border-radius:17px;display:grid;place-items:center;color:#fff;font-size:21px;font-weight:700}.metric-icon.blue{background:linear-gradient(145deg,#2864e5,#0b2f8f)}.metric-icon.orange{background:linear-gradient(145deg,#ff7a2f,#ef4d09)}.metric-icon.green{background:linear-gradient(145deg,#51cf69,#249d3e)}.metric-card small{font-size:13px;color:var(--muted)}.metric-card strong{font-size:31px;line-height:1.05;color:var(--blue3)}.metric-card em{font-style:normal;font-size:11px;color:var(--blue)}
.dash-grid{display:grid;grid-template-columns:1fr 1.3fr .9fr;gap:16px;margin-top:16px}.panel{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow3d);overflow:hidden}.panel-head{padding:17px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-head h3{font-size:19px;margin:0;color:var(--blue3)}.panel-head p{font-size:12px;margin:4px 0 0;color:var(--muted)}.panel-body{padding:18px}.more-btn{width:38px;height:38px;background:#f1f5ff;color:var(--blue);font-size:20px}.notify-chip{min-width:30px;height:30px;background:#ff3b30;color:#fff}.action-row{width:calc(100% - 24px);margin:12px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:13px;display:grid;grid-template-columns:42px 1fr 18px;gap:10px;align-items:center;text-align:left;color:var(--text)}.action-icon{width:42px;height:42px;border-radius:13px;background:#eef3ff;display:grid;place-items:center}.action-row b{font-size:14px}.action-row small{display:block;font-size:11px;color:var(--muted);margin-top:3px}.action-row strong{font-size:20px;color:var(--blue)}
.stack-list{padding:12px;display:grid;gap:8px}.stack-item{border:1px solid var(--line);border-radius:13px;padding:11px;background:#fbfcff;display:grid;grid-template-columns:42px 1fr;gap:9px;align-items:start}.stack-icon{width:42px;height:42px;border-radius:13px;background:#eef3ff;display:grid;place-items:center}.stack-item b{font-size:13px}.stack-item small{display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4}.panel-link{width:100%;padding:12px 16px;background:#fff;border-top:1px solid var(--line);color:var(--blue);text-align:left}.quick-panel{margin-top:16px}.quick-grid{padding:14px;display:grid;grid-template-columns:repeat(5,1fr);gap:11px}.quick-grid button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px;color:var(--blue);font-size:20px}.quick-grid b{display:block;font-size:13px;color:var(--blue3);margin-top:5px}.quick-grid small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.toolbar-head{align-items:flex-start}.toolbar{padding:13px 16px;display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line)}.toolbar input,.toolbar select{border:1px solid var(--line);background:#fbfcff;border-radius:11px;padding:10px 11px;font-size:14px;outline:none}.toolbar input{min-width:290px;flex:1}.toolbar select{min-width:145px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:860px}.wide-table{min-width:1160px}th,td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:14px}th{background:#fafbfe;color:#68748a;font-size:12px;font-weight:700}tbody tr:hover td{background:#fbfcff}.ticket{font-weight:700;color:var(--blue)}.subtext{display:block;font-size:11px;color:var(--muted);margin-top:3px}.badge{display:inline-flex;padding:5px 8px;border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap}.prio-ด่วนมาก{background:#ffe4dc;color:#b83a18}.prio-สูง{background:#fff0d6;color:#8f5800}.prio-ปกติ{background:#e8f0ff;color:#2856a8}.prio-ต่ำ{background:#eef1f5;color:#596576}.status-เคสใหม่{background:#e7efff;color:#2856a8}.status-มอบหมายแล้ว{background:#eee8ff;color:#6844a4}.status-นัดหมายแล้ว{background:#e4f7ee;color:#177353}.status-กำลังดำเนินการ{background:#fff1d7;color:#935700}.status-รออะไหล่{background:#f2ebf7;color:#714f86}.status-รอส่งงาน{background:#e9f5ff;color:#1a6b9c}.status-เสร็จสิ้น,.status-ปิดเคส{background:#def5e5;color:#206b39}.row-actions{display:flex;gap:5px}.mini-btn{border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--blue);padding:5px 8px;font-size:11px;font-weight:700}.mobile-card-list{display:none}
.people-grid{padding:17px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.person-card{border:1px solid var(--line);border-radius:17px;background:#fbfcff;padding:16px}.avatar{width:50px;height:50px;border-radius:16px;background:linear-gradient(145deg,#2b65e7,#0b2f8f);color:#fff;display:grid;place-items:center;font-weight:700}.person-card h4{margin:10px 0 0;font-size:15px}.person-card p{font-size:12px;color:var(--muted);margin:4px 0}.person-stat{display:flex;justify-content:space-between;margin-top:11px;padding-top:9px;border-top:1px solid var(--line);font-size:12px}
.calendar-toolbar{padding:12px 16px;display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--line)}.calendar-toolbar b{margin-left:auto;color:var(--blue);font-size:14px}.calendar-scroll{overflow:auto}.tech-calendar{min-width:1080px}.cal-header,.cal-row{display:grid;grid-template-columns:180px repeat(7,1fr)}.cal-header>div,.cal-row>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px;min-height:76px}.cal-header>div{min-height:auto;background:#fafbfe;color:var(--muted);font-size:12px;font-weight:700}.tech-cell{background:#fbfcff}.tech-name{font-size:13px;font-weight:700}.tech-role{font-size:10px;color:var(--muted)}.job-chip{width:100%;border:0;border-left:4px solid var(--blue);border-radius:9px;background:#edf3ff;padding:7px;text-align:left;font-size:10px;color:var(--text);margin-bottom:5px}.job-chip.orange{border-color:var(--orange);background:#fff0e9}.job-chip.green{border-color:var(--green);background:#ebfaee}.job-chip.purple{border-color:#8a5bc0;background:#f2ebfb}.job-chip b{display:block}.mobile-agenda{display:none}
.notification-list{padding:15px;display:grid;gap:9px}.notification-row{border:1px solid var(--line);border-radius:14px;padding:13px;display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:start}.notification-row.unread{background:#f7faff;border-color:#bfd0ff}.notification-row h4{font-size:14px;margin:0}.notification-row p{font-size:12px;line-height:1.45;margin:3px 0 0;color:var(--muted)}.notification-row small{font-size:10px;color:var(--muted)}
.report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:16px}.report-card{border:1px solid var(--line);background:#fff;border-radius:18px;box-shadow:var(--shadow3d);padding:16px;text-align:left;color:var(--text)}.report-card span{font-size:23px}.report-card b{display:block;font-size:13px;margin-top:8px}.report-card strong{display:block;font-size:30px;color:var(--blue);margin-top:3px}.report-card small{font-size:10px;color:var(--muted)}.report-summary{padding:17px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.summary-box{border:1px solid var(--line);border-radius:14px;padding:13px}.summary-box small{font-size:11px;color:var(--muted)}.summary-box b{display:block;margin-top:4px;font-size:17px;color:var(--blue3)}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.span2{grid-column:1/-1}.settings-list{padding:9px}.settings-list button{width:100%;border:0;border-bottom:1px solid var(--line);background:#fff;padding:14px;display:grid;grid-template-columns:36px 1fr 20px;gap:9px;text-align:left;align-items:center}.settings-list b{font-size:13px}.settings-list small{display:block;font-size:11px;color:var(--muted);margin-top:2px}.settings-list strong{font-size:20px;color:var(--blue)}.info-box{padding:12px;background:#f1f6ff;border:1px solid #bdd1ff;border-radius:12px;color:#40567e;font-size:12px;line-height:1.55;margin-bottom:13px}.field{margin-bottom:12px}.field label{display:block;font-size:12px;font-weight:600;color:#56627a;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#fbfcff;padding:10px 11px;font-size:14px;outline:none}.field textarea{min-height:82px;resize:vertical}.form-grid{display:grid;gap:11px}.form-grid.cols2{grid-template-columns:repeat(2,1fr)}.form-grid.cols3{grid-template-columns:repeat(3,1fr)}.form-grid.cols4{grid-template-columns:repeat(4,1fr)}.field.full{grid-column:1/-1}.button-row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.system-status{padding:15px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.status-box{border:1px solid var(--line);border-radius:13px;padding:12px;background:#fbfcff}.status-box small{font-size:10px;color:var(--muted)}.status-box b{display:block;font-size:14px;margin-top:4px}.cloud-result{font-size:11px;color:var(--muted);margin-top:9px}
.modal{display:none;position:fixed;inset:0;background:rgba(7,25,71,.52);z-index:100;padding:18px;align-items:center;justify-content:center}.modal.open{display:flex}.modal-panel{width:min(980px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.28)}.modal-panel.small{width:min(620px,100%)}.modal-head{position:sticky;top:0;background:#fff;z-index:4;border-bottom:1px solid var(--line);padding:17px 19px;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.modal-head h2{font-size:20px;margin:0;color:var(--blue3)}.modal-head p{font-size:12px;margin:4px 0 0;color:var(--muted)}.close-btn{border:0;width:37px;height:37px;border-radius:11px;background:#f2f5fb;font-size:22px}.modal-body{padding:19px}.modal-section{padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid var(--line)}.section-title{font-size:14px;color:var(--blue);font-weight:700;margin-bottom:12px}.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);overflow:auto;margin-bottom:14px}.tab-btn{border:0;background:transparent;color:var(--muted);padding:9px 11px;font-size:12px;font-weight:700;white-space:nowrap}.tab-btn.active{color:var(--blue);border-bottom:3px solid var(--blue)}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.detail-box{border:1px solid var(--line);border-radius:11px;padding:10px}.detail-box.full{grid-column:1/-1}.detail-box small{display:block;font-size:10px;color:var(--muted)}.detail-box b{display:block;font-size:13px;margin-top:4px;white-space:pre-wrap}.related-list{display:grid;gap:8px}.related-item{border:1px solid var(--line);border-radius:11px;padding:11px;background:#fbfcff}.related-item b{font-size:12px}.related-item small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.config-list{display:grid;gap:7px}.config-row{display:flex;gap:7px}.config-row input{flex:1;border:1px solid var(--line);border-radius:10px;padding:9px 10px}.danger-btn{border:1px solid #f0c0c0;background:#fff;color:#d43b3b;border-radius:10px;padding:8px 10px;font-weight:700}.more-sheet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.more-sheet-grid button{border:1px solid var(--line);border-radius:14px;background:#fff;padding:16px;text-align:left;color:var(--blue);font-size:21px}.more-sheet-grid b{display:block;font-size:13px;color:var(--text);margin-top:6px}.more-sheet-grid small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.bottom-nav{display:none}.toast{position:fixed;right:22px;bottom:22px;z-index:200;background:#0c245e;color:#fff;border-radius:11px;padding:12px 15px;font-size:12px;box-shadow:0 14px 30px rgba(0,0,0,.2);opacity:0;transform:translateY(12px);transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:none}.empty{padding:26px;text-align:center;color:var(--muted);font-size:12px}
@media(max-width:1200px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dash-grid{grid-template-columns:1fr 1fr}.case-intake{grid-column:1/-1}.people-grid{grid-template-columns:repeat(2,1fr)}.report-grid{grid-template-columns:repeat(2,1fr)}.report-summary{grid-template-columns:repeat(2,1fr)}.system-status{grid-template-columns:repeat(3,1fr)}.quick-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
  body{background:#f6f8fc}.app-shell{display:block}.sidebar{left:-270px;transition:.2s}.sidebar.open{left:12px}.main{padding:12px 12px 96px}.topbar{top:10px;min-height:78px;padding:13px 14px}.mobile-only{display:block}.topbar h1{font-size:20px}.topbar p{font-size:11px}.tablet-up{display:none}
  .metric-grid{grid-template-columns:repeat(4,1fr);gap:10px}.metric-card{grid-template-columns:1fr;text-align:center;padding:12px 8px}.metric-icon{grid-row:auto;margin:auto;width:46px;height:46px}.metric-card small{font-size:10px}.metric-card strong{font-size:24px}.metric-card em{font-size:9px}
  .dash-grid{grid-template-columns:1fr}.case-intake{grid-column:auto}.quick-grid{grid-template-columns:repeat(4,1fr)}.quick-grid button:nth-child(4){display:none}.quick-grid button{font-size:18px}.quick-grid b{font-size:11px}.quick-grid small{display:none}
  .settings-grid{grid-template-columns:1fr}.span2{grid-column:auto}.form-grid.cols3{grid-template-columns:repeat(2,1fr)}.system-status{grid-template-columns:repeat(3,1fr)}
  .people-grid{grid-template-columns:repeat(2,1fr)}.report-grid{grid-template-columns:repeat(2,1fr)}.bottom-nav{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:60;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:7px 10px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(25,48,105,.09)}
  .bottom-nav button{border:0;background:transparent;color:#5c6780;display:grid;place-items:center;gap:2px;font-size:17px}.bottom-nav b{font-size:9px}.bottom-nav button.active{color:var(--blue)}.bottom-nav .fab span{width:50px;height:50px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:27px;margin-top:-25px;box-shadow:0 8px 18px rgba(255,91,20,.28)}.bottom-nav .fab b{color:var(--text)}
}
@media(max-width:640px){
  .topbar{background:linear-gradient(180deg,#0d3aa6,#082b81);border:0;color:#fff;box-shadow:none;border-radius:0;margin:-12px -12px 0;padding:14px 15px 10px}.topbar h1,.topbar p{display:none}.topbar .icon-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.15);color:#fff}
  .hero-mobile{display:flex;background:linear-gradient(180deg,#0d3aa6,#082b81);margin:0 -12px 14px;padding:8px 16px 20px;color:#fff;justify-content:space-between;gap:12px;align-items:flex-end}.hero-logo{width:135px;height:64px;object-fit:contain}.hero-mobile h2{font-size:21px;line-height:1.25;margin:8px 0 0}.hero-mobile p{font-size:11px;opacity:.82;margin:5px 0 0}.hero-mobile .orange-btn{max-width:135px;font-size:12px}
  .metric-grid{margin-top:-20px;position:relative;z-index:3;background:#fff;border-radius:20px;padding:10px;box-shadow:var(--shadow);gap:7px}.metric-card{border:0;box-shadow:none;padding:7px 3px}.metric-icon{width:41px;height:41px;border-radius:14px;font-size:17px}.metric-card small{font-size:9px}.metric-card strong{font-size:21px}.metric-card em{font-size:8px}
  .dash-grid{margin-top:12px;gap:12px}.panel{border-radius:17px}.panel-head{padding:14px}.panel-head h3{font-size:16px}.panel-head p{font-size:10px}.quick-panel{margin-top:12px}.quick-grid{grid-template-columns:repeat(4,1fr);gap:7px;padding:10px}.quick-grid button{padding:9px 4px}.toolbar-head{align-items:center}.toolbar-head .primary-btn{font-size:11px;padding:9px 10px}.toolbar{padding:10px}.toolbar input{min-width:100%}.toolbar select{flex:1;min-width:120px}
  .table-wrap{display:none}.mobile-card-list{display:grid;padding:11px;gap:9px}.mobile-data-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px}.mobile-data-card .card-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.mobile-data-card h4{font-size:13px;margin:0}.mobile-data-card p{font-size:11px;color:var(--muted);margin:4px 0}.mobile-data-card .card-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.mobile-data-card .card-actions{display:flex;gap:6px;margin-top:10px}.mobile-data-card .card-actions button{flex:1}
  .people-grid{grid-template-columns:1fr;padding:11px}.calendar-scroll{display:none}.mobile-agenda{display:grid;padding:11px;gap:9px}.agenda-day{border:1px solid var(--line);border-radius:14px;padding:11px}.agenda-day h4{font-size:13px;margin:0 0 8px;color:var(--blue)}.agenda-job{border-left:4px solid var(--blue);background:#f4f7ff;border-radius:9px;padding:8px;margin-top:6px}.agenda-job b{font-size:11px}.agenda-job small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
  .notification-row{grid-template-columns:38px 1fr}.notification-row>small{grid-column:2}.report-grid{grid-template-columns:repeat(2,1fr);gap:10px}.report-card{padding:12px}.report-summary{grid-template-columns:1fr}.system-status{grid-template-columns:repeat(2,1fr)}
  .modal{align-items:flex-end;padding:0}.modal-panel,.modal-panel.small{width:100%;max-height:90vh;border-radius:22px 22px 0 0}.modal-head{padding:15px}.modal-body{padding:15px}.detail-grid{grid-template-columns:1fr 1fr}.form-grid.cols2,.form-grid.cols3,.form-grid.cols4{grid-template-columns:1fr}.field.full{grid-column:auto}.modal-panel::before{content:"";display:block;width:48px;height:5px;border-radius:99px;background:#d7dce6;margin:8px auto 0}.more-sheet-grid{grid-template-columns:repeat(2,1fr)}.toast{left:12px;right:12px;bottom:82px;text-align:center}
}


/* ===== V5.1 QUOTATION MODULE ===== */
.quotation-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px;padding:3px 2px}
.quotation-head h2{font-size:27px;margin:0;color:var(--blue3)}
.quotation-head p{font-size:13px;color:var(--muted);margin:5px 0 0}
.quotation-layout{display:grid;grid-template-columns:minmax(0,1.5fr) 380px;gap:16px;align-items:start}
.quote-section{margin-bottom:14px}
.quote-section .panel-body{padding:17px}
.quote-summary{position:sticky;top:130px}
.quote-zone{display:inline-flex;border-radius:999px;background:#edf3ff;color:var(--blue);padding:6px 10px;font-size:12px;font-weight:700;margin-bottom:10px}
.quote-machine-line{display:grid;grid-template-columns:32px minmax(180px,1fr) 64px 115px 38px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line)}
.quote-machine-line select{width:100%;border:1px solid var(--line);background:#fbfcff;border-radius:10px;padding:9px;font-size:13px}
.quote-machine-price{text-align:right;font-weight:700;font-size:12px;color:var(--blue3)}
.quote-size{display:grid;place-items:center;min-height:34px;border-radius:9px;background:#eef3ff;color:var(--blue);font-weight:700;font-size:12px}
.quote-size.L{background:#fff0e8;color:#b64a12}
.quote-size.missing{padding:0;background:#fff7ed;border:1px solid #fdba74}.quote-size.missing select{min-width:0;width:100%;padding:7px 2px!important;text-align:center;border:0!important;background:transparent!important;color:#b54708;font-weight:800;box-shadow:none!important}
.quote-remove{width:36px;height:36px;border:0;border-radius:9px;background:#fff0f0;color:#d63a38;font-weight:700}
.quote-part-line{display:grid;grid-template-columns:minmax(150px,1fr) 110px 150px 120px 38px;gap:8px;align-items:center;margin-bottom:8px}
.quote-part-line input,.quote-part-line select{width:100%;border:1px solid var(--line);background:#fbfcff;border-radius:10px;padding:9px;font-size:13px}
.quote-part-price{text-align:right;font-weight:700;font-size:12px}
.quote-sum-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:12px}
.quote-total-row{border-top:2px solid var(--blue);border-bottom:0;margin-top:5px;padding-top:11px;font-size:14px}
.quote-grand{text-align:right;font-size:31px;font-weight:700;color:var(--orange);margin:9px 0 13px}
.quote-action-stack{display:grid;gap:8px;margin-top:12px}
.quote-action-stack button{width:100%}
.quote-history-panel{margin-top:16px}
.quote-warning{padding:10px;border-radius:10px;background:#fff7e7;border:1px solid #f4d58f;color:#895500;font-size:11px;line-height:1.45;margin-top:8px}
.quote-error{padding:10px;border-radius:10px;background:#fff0f0;border:1px solid #f1bbbb;color:#a83232;font-size:11px;line-height:1.45;margin-top:8px}
.quote-doc{padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff}
.quote-doc-head{display:flex;justify-content:space-between;gap:18px;background:linear-gradient(135deg,var(--blue3),var(--blue));color:#fff;border-radius:13px;padding:15px;margin-bottom:14px}
.quote-doc-logo{width:145px;height:70px;object-fit:contain;background:#fff;border-radius:9px;padding:5px}
.quote-doc-title{text-align:right}
.quote-doc-title h2{margin:0;color:#fff;font-size:22px}
.quote-doc-title div{font-size:12px;margin-top:4px}
.quote-meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.quote-meta-grid div{background:#f8faff;border-radius:9px;padding:9px;font-size:12px}
.quote-meta-grid small{color:var(--muted)}
.quote-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700;background:#eef3ff;color:var(--blue)}
.quote-status.approved{background:#e2f6e8;color:#216a39}
.quote-status.sent{background:#fff0d8;color:#8f5800}
.quote-status.rejected{background:#ffe7e7;color:#a73535}
@media(max-width:1100px){.quotation-layout{grid-template-columns:1fr}.quote-summary{position:static}}
@media(max-width:640px){
 .quotation-head{align-items:stretch;flex-direction:column}.quotation-head h2{font-size:22px}
 .quote-machine-line{grid-template-columns:28px minmax(0,1fr) 48px 76px 34px;gap:5px}
 .quote-machine-line select{font-size:11px;padding:8px 6px}.quote-machine-price{font-size:10px}
 .quote-part-line{grid-template-columns:1fr 85px;gap:6px;border-bottom:1px dashed var(--line);padding-bottom:9px}
 .quote-part-line select{grid-column:1/2}.quote-part-line .quote-part-price{grid-column:2/3}
 .quote-meta-grid{grid-template-columns:1fr}
 .quote-doc-head{flex-direction:column}.quote-doc-title{text-align:left}
}


/* ===== V5.2 ADVANCED SETTINGS ===== */
.settings-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px;padding:22px 24px;border-radius:22px;background:linear-gradient(135deg,#0b2f8f 0%,#174fc4 68%,#2b65e7 100%);color:#fff;box-shadow:0 16px 38px rgba(11,47,143,.18)}
.settings-hero h2{font-size:28px;margin:3px 0 5px;color:#fff}.settings-hero p{font-size:13px;line-height:1.6;margin:0;max-width:850px;color:#e8efff}
.settings-eyebrow{font-size:10px;letter-spacing:.1em;font-weight:700;color:#bfd0ff}
.settings-editable-badge{white-space:nowrap;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.13);padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700}
.settings-section-head{display:flex;justify-content:space-between;align-items:end;margin:18px 2px 10px}.settings-section-head b{font-size:15px;color:var(--blue3)}.settings-section-head small{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.settings-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.setting-action-card{border:1px solid var(--line);background:#fff;border-radius:17px;padding:16px;text-align:left;display:grid;grid-template-columns:42px 1fr 18px;gap:10px;align-items:center;min-height:105px;box-shadow:0 6px 18px rgba(25,48,105,.045);transition:.18s}
.setting-action-card:hover{transform:translateY(-2px);border-color:#a9c0f7;box-shadow:0 12px 28px rgba(25,48,105,.09)}.setting-action-card.commercial{background:linear-gradient(180deg,#fff,#fffaf7)}
.setting-action-card b{font-size:13px;color:var(--blue3)}.setting-action-card small{display:block;font-size:10.5px;color:var(--muted);line-height:1.4;margin-top:3px}.setting-action-card strong{font-size:22px;color:var(--blue)}
.setting-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#eef4ff;font-size:19px}.commercial .setting-icon{background:#fff0e7}
.settings-cloud-grid{margin-top:8px}.setting-state{font-size:10px;border-radius:999px;padding:5px 9px;background:#fff0d8;color:#8a5900;font-weight:700}.setting-state.online{background:#e5f7ea;color:#216a39}
.settings-snapshot{padding:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.snapshot-item{border:1px solid var(--line);border-radius:12px;padding:11px;background:#fbfcff}.snapshot-item small{font-size:10px;color:var(--muted)}.snapshot-item b{display:block;font-size:13px;color:var(--blue3);margin-top:3px}
.toggle-list{display:grid;gap:8px}.toggle-row{border:1px solid var(--line);border-radius:12px;padding:11px 12px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fbfcff}.toggle-row b{font-size:12px}.toggle-row small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.switch{position:relative;width:45px;height:26px;flex:0 0 auto}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;background:#cdd5e4;border-radius:99px;transition:.2s}.switch span:after{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:.2s}.switch input:checked+span{background:var(--blue)}.switch input:checked+span:after{transform:translateX(19px)}
.role-row,.travel-row{display:grid;gap:7px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:11px;background:#fbfcff;margin-bottom:7px}.role-row{grid-template-columns:1fr 90px 1.4fr 70px}.travel-row{grid-template-columns:74px 90px 90px 100px 100px 62px}.role-row input,.travel-row input{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px;font-size:12px;background:#fff}
.setting-help{font-size:10px;color:var(--muted);line-height:1.5}

/* Technician photo */
.person-card{position:relative;overflow:hidden}.person-photo{width:70px;height:70px;border-radius:18px;object-fit:cover;display:block;border:3px solid #fff;box-shadow:0 5px 16px rgba(11,47,143,.16);background:#eef4ff}
.person-card .avatar{width:70px;height:70px;border-radius:18px}
.tech-photo-line{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);background:#fbfcff;border-radius:14px;margin-bottom:13px}.tech-photo-preview{width:92px;height:92px;border-radius:20px;object-fit:cover;background:#eef4ff;border:1px solid var(--line)}.tech-photo-placeholder{width:92px;height:92px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(145deg,#2b65e7,#0b2f8f);color:#fff;font-size:25px;font-weight:700}
.tech-profile-head{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fbfcff;margin-bottom:13px}.tech-profile-head .person-photo,.tech-profile-head .avatar{width:82px;height:82px;border-radius:20px}
.skill-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.skill-tag{padding:4px 7px;border-radius:999px;background:#eef4ff;color:#315da8;font-size:9px;font-weight:600}
.tech-status-dot{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--muted)}.tech-status-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:#32a852}.tech-status-dot.busy:before{background:#f59b23}.tech-status-dot.off:before{background:#98a2b3}
@media(max-width:1100px){.settings-card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
 .settings-hero{flex-direction:column;padding:18px}.settings-hero h2{font-size:23px}.settings-card-grid{grid-template-columns:1fr}.setting-action-card{min-height:88px}
 .settings-snapshot{grid-template-columns:1fr}.role-row{grid-template-columns:1fr 85px}.role-row input:nth-child(3){grid-column:1/-1}.travel-row{grid-template-columns:1fr 1fr}.travel-row input:first-child{grid-column:1/-1}
 .tech-photo-line,.tech-profile-head{align-items:flex-start}.tech-photo-preview,.tech-photo-placeholder{width:80px;height:80px}
}


/* =====================================================================
   V5.3 — MODERN 3D / GLASS SIDEBAR
   Larger readable text + premium hover elevation
   ===================================================================== */

@media(min-width:901px){
  .app-shell{
    grid-template-columns:318px 1fr;
  }

  .sidebar{
    left:18px;
    top:16px;
    bottom:16px;
    width:282px;
    padding:15px 14px 14px;
    border-radius:30px;
    overflow:hidden;
    background:
      radial-gradient(circle at 18% 4%,rgba(100,155,255,.32),transparent 24%),
      radial-gradient(circle at 92% 72%,rgba(63,105,225,.22),transparent 30%),
      linear-gradient(165deg,#2354c7 0%,#123d9d 40%,#082a76 100%);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:
      0 28px 60px rgba(7,37,105,.25),
      0 8px 20px rgba(7,37,105,.18),
      inset 0 1px 0 rgba(255,255,255,.32),
      inset 0 -1px 0 rgba(0,20,72,.18);
  }

  .sidebar:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:
      linear-gradient(120deg,rgba(255,255,255,.10),transparent 27%),
      linear-gradient(300deg,rgba(255,255,255,.04),transparent 40%);
  }

  .brand-block{
    position:relative;
    z-index:1;
    padding:9px 10px 16px;
    border-bottom:1px solid rgba(255,255,255,.16);
    background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
    border-radius:20px 20px 10px 10px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  }

  .brand-logo{
    width:100%;
    height:76px;
    padding:5px 10px;
    object-fit:contain;
    border-radius:15px;
    filter:drop-shadow(0 6px 12px rgba(3,18,61,.22));
  }

  .brand-title{
    margin-top:7px;
  }

  .brand-title b{
    font-size:18px;
    letter-spacing:.01em;
    font-weight:700;
    text-shadow:0 2px 8px rgba(0,20,70,.22);
  }

  .brand-title span{
    font-size:13px;
    opacity:.88;
    margin-top:1px;
  }

  .side-nav{
    position:relative;
    z-index:2;
    display:grid;
    gap:7px;
    margin:13px -2px 0;
    padding:3px 6px 12px 2px;
    overflow-y:auto;
    overflow-x:hidden;
    min-width:0;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.24) transparent;
  }

  .side-nav::-webkit-scrollbar{width:5px}
  .side-nav::-webkit-scrollbar-track{background:transparent}
  .side-nav::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.22);
    border-radius:99px;
  }

  .nav-item{
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    min-height:55px;
    padding:8px 11px 8px 9px;
    border:1px solid transparent;
    border-radius:16px;
    grid-template-columns:39px minmax(0,1fr) auto;
    gap:10px;
    color:#f5f8ff;
    font-size:16.5px;
    letter-spacing:.005em;
    transition:
      transform .20s cubic-bezier(.2,.8,.2,1),
      box-shadow .20s ease,
      background .20s ease,
      border-color .20s ease,
      color .20s ease;
    will-change:transform;
    text-shadow:0 1px 4px rgba(0,22,78,.18);
  }

  .nav-item > span:first-child{
    width:37px;
    height:37px;
    display:grid;
    place-items:center;
    border-radius:12px;
    font-size:17px;
    line-height:1;
    background:
      linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:
      0 6px 12px rgba(2,19,66,.16),
      inset 0 1px 0 rgba(255,255,255,.28);
    transition:transform .20s ease,background .20s ease,box-shadow .20s ease;
  }

  .nav-item b{
    font-size:16.5px;
    font-weight:600;
    line-height:1.28;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .nav-item:hover{
    z-index:3;
    color:#fff;
    transform:translate3d(6px,-2px,0) scale(1.018);
    background:
      linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.09));
    border-color:rgba(255,255,255,.22);
    box-shadow:
      0 13px 24px rgba(2,20,72,.20),
      0 3px 7px rgba(2,20,72,.13),
      inset 0 1px 0 rgba(255,255,255,.30);
  }

  .nav-item:hover > span:first-child{
    transform:translateY(-1px) scale(1.06);
    background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(255,255,255,.12));
    box-shadow:
      0 8px 15px rgba(2,19,66,.22),
      inset 0 1px 0 rgba(255,255,255,.42);
  }

  .nav-item:active{
    transform:translate3d(3px,0,0) scale(.994);
    box-shadow:
      0 5px 10px rgba(2,20,72,.16),
      inset 0 2px 5px rgba(4,27,87,.15);
  }

  .nav-item.active{
    color:#143f9f;
    transform:translateX(4px);
    border-color:rgba(255,255,255,.70);
    background:
      linear-gradient(145deg,rgba(255,255,255,.98),rgba(237,244,255,.94));
    box-shadow:
      0 13px 26px rgba(1,21,72,.22),
      0 4px 0 rgba(3,29,91,.08),
      inset 0 1px 0 #fff,
      inset 0 -1px 0 rgba(116,145,205,.18);
    text-shadow:none;
  }

  .nav-item.active:before{
    content:"";
    position:absolute;
    left:-4px;
    top:12px;
    bottom:12px;
    width:4px;
    border-radius:99px;
    background:linear-gradient(180deg,#ff8b37,#ff5714);
    box-shadow:0 0 12px rgba(255,91,20,.55);
  }

  .nav-item.active > span:first-child{
    color:#fff;
    background:linear-gradient(145deg,#3370ef,#123f9e);
    border-color:rgba(255,255,255,.42);
    box-shadow:
      0 7px 14px rgba(16,62,160,.28),
      inset 0 1px 0 rgba(255,255,255,.36);
  }

  .nav-item.active:hover{
    color:#0e378e;
    transform:translate3d(7px,-2px,0) scale(1.012);
    background:linear-gradient(145deg,#fff,#eef4ff);
  }

  .nav-badge{
    min-width:25px;
    height:25px;
    padding:0 7px;
    font-size:11px;
    border:2px solid rgba(255,255,255,.84);
    background:linear-gradient(180deg,#ff6258,#ef2b26);
    box-shadow:0 5px 10px rgba(167,19,18,.25);
  }

  .side-bottom{
    position:relative;
    z-index:2;
    gap:9px;
    padding-top:9px;
  }

  .cloud-card,.eco-card{
    border-radius:17px;
    padding:12px 13px;
    border:1px solid rgba(255,255,255,.12);
    background:
      linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.07));
    box-shadow:
      0 8px 16px rgba(1,18,61,.13),
      inset 0 1px 0 rgba(255,255,255,.18);
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  }

  .cloud-card:hover{
    transform:translateY(-2px);
    background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.10));
    box-shadow:
      0 12px 21px rgba(1,18,61,.18),
      inset 0 1px 0 rgba(255,255,255,.25);
  }

  .cloud-card b,.eco-card b{
    font-size:12.5px;
    font-weight:650;
  }

  .cloud-card small,.eco-card small{
    font-size:10.5px;
    opacity:.80;
  }

  .cloud-dot{
    width:12px;
    height:12px;
    box-shadow:0 0 0 4px rgba(255,255,255,.08);
  }

  .main{
    grid-column:2;
    padding-left:0;
  }
}

/* Keep the redesigned sidebar comfortable on smaller notebook heights */
@media(min-width:901px) and (max-height:820px){
  .sidebar{top:10px;bottom:10px;padding-top:10px;padding-bottom:10px}
  .brand-block{padding-top:4px;padding-bottom:9px}
  .brand-logo{height:63px}
  .brand-title{margin-top:3px}
  .brand-title b{font-size:16.5px}
  .brand-title span{font-size:11.5px}
  .side-nav{gap:4px;margin-top:8px}
  .nav-item{min-height:47px;padding-top:5px;padding-bottom:5px;font-size:15.5px}
  .nav-item b{font-size:15.5px}
  .nav-item > span:first-child{width:33px;height:33px;border-radius:10px}
  .side-bottom{gap:6px}
  .cloud-card,.eco-card{padding:8px 10px}
}

/* Tablet/mobile drawer gets the same softer premium visual language */
@media(max-width:900px){
  .sidebar{
    width:min(300px,calc(100vw - 24px));
    border-radius:26px;
    padding:15px;
    background:
      radial-gradient(circle at 16% 4%,rgba(100,155,255,.30),transparent 26%),
      linear-gradient(165deg,#2354c7 0%,#123d9d 45%,#082a76 100%);
    border:1px solid rgba(255,255,255,.20);
    box-shadow:0 26px 60px rgba(4,25,78,.30);
  }
  .brand-title b{font-size:18px}
  .brand-title span{font-size:12.5px}
  .side-nav{gap:6px}
  .nav-item{
    min-height:54px;
    grid-template-columns:38px 1fr auto;
    padding:8px 10px;
    font-size:16.5px;
    border-radius:15px;
    transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
  }
  .nav-item b{font-size:16.5px}
  .nav-item > span:first-child{
    width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
    background:rgba(255,255,255,.12);
  }
  .nav-item.active{
    background:linear-gradient(145deg,#fff,#eef4ff);
    color:#143f9f;
    box-shadow:0 10px 20px rgba(2,20,72,.22),inset 0 1px 0 #fff;
  }
  .nav-item.active > span:first-child{
    color:#fff;background:linear-gradient(145deg,#3370ef,#123f9e);
  }
}


/* =====================================================================
   V5.4 — Bigger typography + premium logo + team split + calendar views
   ===================================================================== */
html,body{font-size:17px}
body{letter-spacing:.002em}
.topbar{min-height:104px;padding:20px 24px}.topbar h1{font-size:32px}.topbar p{font-size:15px}
.icon-btn,.search-btn,.primary-btn,.orange-btn,.soft-btn{font-size:15px}.search-btn{height:48px}.icon-btn{width:48px;height:48px}
.primary-btn,.orange-btn,.soft-btn{padding:12px 16px;border-radius:14px}
.panel-head h3{font-size:22px}.panel-head p{font-size:13.5px}.panel-body{padding:20px}
.metric-card small{font-size:14px}.metric-card strong{font-size:34px}.metric-card em{font-size:12px}
.action-row b{font-size:15px}.action-row small{font-size:12px}
.quick-grid b{font-size:14px}.quick-grid small{font-size:11px}
.toolbar input,.toolbar select{font-size:15px;padding:11px 12px}
th{font-size:13px}td{font-size:15px}.subtext{font-size:12px}.badge{font-size:12px;padding:6px 9px}
.field label{display:block;margin-bottom:8px;font-size:13.5px;font-weight:700;color:var(--blue3)}
input,select,textarea{font-size:15.5px} 
.field input,.field select,.field textarea,.quote-machine-line select,.quote-machine-line input,.quote-part-line input,.quote-part-line select{padding:12px 13px;font-size:15px}
.person-card h4{font-size:17px}.person-card p,.person-stat{font-size:13px}
.quote-section .panel-head h3{font-size:20px}.quote-section .panel-head p{font-size:13px}
.quote-grand{font-size:38px}.quote-sum-row{font-size:14px}.quote-total-row{font-size:16px}.quote-warning,.quote-error{font-size:12px}
.quote-doc-title h2{font-size:24px}.quote-meta-grid div{font-size:13px}.quote-doc table th,.quote-doc table td{font-size:13.5px}

/* Premium logo area */
@media(min-width:901px){
  .brand-block{
    padding:12px 12px 18px;
    border-radius:24px;
    border-bottom:0;
    background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px rgba(6,28,84,.18);
    backdrop-filter:blur(10px);
  }
  .brand-logo-shell{
    display:flex;align-items:center;justify-content:center;
    min-height:112px;
    border-radius:22px;
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(240,246,255,.92));
    border:1px solid rgba(255,255,255,.72);
    box-shadow:0 12px 26px rgba(4,28,88,.18), inset 0 1px 0 rgba(255,255,255,.96);
    padding:10px 12px;
  }
  .brand-logo{
    height:100px;
    object-fit:contain;
    border-radius:0;
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,.95))
      drop-shadow(0 0 12px rgba(60,190,255,.60))
      drop-shadow(0 0 24px rgba(60,190,255,.38))
      drop-shadow(0 10px 18px rgba(7,36,102,.14));
  }
  .brand-title{margin-top:12px}
  .brand-title b{font-size:20px}
  .brand-title span{font-size:14px;opacity:.92}
}
@media(max-width:900px){
  .brand-block{padding:12px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08));border-bottom:0}
  .brand-logo-shell{display:flex;align-items:center;justify-content:center;min-height:100px;border-radius:18px;background:rgba(255,255,255,.95);padding:8px 10px;box-shadow:0 10px 22px rgba(4,28,88,.18)}
  .brand-logo{height:88px;filter:drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 0 10px rgba(60,190,255,.55)) drop-shadow(0 0 20px rgba(60,190,255,.28))}
}

/* Team split */
.team-toolbar{padding:14px 16px 0}.team-segment{display:flex;gap:10px;flex-wrap:wrap}.seg-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:11px 16px;font-size:14px;font-weight:700;color:var(--blue);box-shadow:0 4px 10px rgba(16,54,128,.06);transition:.18s}.seg-btn:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(16,54,128,.1)}.seg-btn.active{background:linear-gradient(180deg,var(--blue2),var(--blue));color:#fff;border-color:transparent;box-shadow:0 10px 20px rgba(11,47,143,.18)}
.team-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.team-stat{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fff,#fbfcff);padding:13px 14px;box-shadow:0 8px 18px rgba(16,54,128,.05)}.team-stat small{display:block;font-size:12px;color:var(--muted)}.team-stat b{display:block;font-size:22px;color:var(--blue3);margin-top:5px}.team-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:700;margin-top:8px}.team-badge.technical{background:#e8f0ff;color:#2c56aa}.team-badge.rd{background:#efe8ff;color:#6740ab}
.person-card .team-badge{margin-top:5px}

/* Calendar views */
.calendar-toolbar-v2{display:grid;grid-template-columns:auto auto auto 1fr;gap:12px;align-items:center;padding:14px 16px}.calendar-main-controls,.calendar-view-switch,.calendar-filters{display:flex;gap:8px;flex-wrap:wrap}.calendar-view-switch .cal-view-btn.active{background:linear-gradient(180deg,var(--blue2),var(--blue));color:#fff;border-color:transparent;box-shadow:0 8px 16px rgba(11,47,143,.18)}.calendar-toolbar-v2 b{justify-self:end;color:var(--blue);font-size:15px}
.calendar-filters select{border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:#fff;font-size:14px;color:var(--blue3)}
.tech-calendar{min-width:1120px}
.cal-header,.cal-row{display:grid;grid-template-columns:210px repeat(7,1fr)}.cal-header>div,.cal-row>div{padding:11px;min-height:88px}.cal-header>div{font-size:13px}.tech-name{font-size:14px}.tech-role{font-size:11px}.job-chip{padding:9px;border-radius:11px;font-size:12px;margin-bottom:6px}.job-chip b{font-size:12px}
.day-list{display:grid;gap:12px;padding:16px}.day-tech-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px;box-shadow:0 8px 18px rgba(15,52,126,.05)}.day-tech-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:8px}.day-tech-head h4{margin:0;font-size:16px}.day-tech-head p{margin:4px 0 0;font-size:12px;color:var(--muted)}.day-empty{padding:12px;border-radius:12px;background:#fbfcff;color:var(--muted);font-size:13px}.day-job{border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:12px;background:#f7faff;padding:11px 12px;margin-top:8px;cursor:pointer}.day-job b{display:block;font-size:13px;color:var(--blue3)}.day-job small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.month-cell{min-height:132px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px}.month-cell.muted{background:#fafbfe}.month-date{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--blue3);margin-bottom:6px}.month-count{font-size:10px;color:#fff;background:var(--blue);border-radius:999px;padding:3px 7px}.month-appts{display:grid;gap:4px}.month-appt{border-radius:9px;background:#edf3ff;padding:6px 7px;font-size:11px;line-height:1.35;cursor:pointer;border-left:3px solid var(--blue)}.month-appt.rd{background:#f4efff;border-left-color:#7b49d4}.month-more{font-size:11px;color:var(--muted);padding-top:2px}
.year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:16px}.year-card{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fff,#fbfcff);padding:16px;box-shadow:0 8px 18px rgba(15,52,126,.05)}.year-card h4{margin:0;font-size:17px;color:var(--blue3)}.year-card p{margin:6px 0 0;font-size:13px;color:var(--muted)}.year-count{font-size:28px;font-weight:700;color:var(--orange);margin:8px 0 2px}.year-mini{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.mobile-agenda .agenda-day h4{font-size:17px}.mobile-agenda .agenda-job b{font-size:13px}.mobile-agenda .agenda-job small{font-size:12px}

@media(max-width:1100px){
  .team-summary-grid{grid-template-columns:1fr}
  .year-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  html,body{font-size:16px}
  .calendar-toolbar-v2{grid-template-columns:1fr;align-items:stretch}
  .calendar-toolbar-v2 b{justify-self:start}
  .team-toolbar{padding:12px}
  .team-summary-grid{grid-template-columns:1fr}
  .month-grid{grid-template-columns:repeat(2,1fr);border:none;gap:10px;padding:12px}
  .month-cell{border:1px solid var(--line);border-radius:14px;min-height:unset}
  .year-grid{grid-template-columns:1fr}
  .people-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .topbar h1{font-size:26px}.topbar p{font-size:13px}
  .panel-head h3{font-size:20px}
  .field input,.field select,.field textarea,.toolbar input,.toolbar select{font-size:14px;padding:11px}
  .quote-grand{font-size:34px}
  .people-grid{grid-template-columns:1fr}
}


/* =====================================================================
   V5.5 — logo without white frame + personal login card
   ===================================================================== */
@media(min-width:901px){
  .brand-block{
    background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px rgba(6,28,84,.14);
  }
  .brand-logo-shell{
    min-height:unset;
    background:transparent;
    border:0;
    box-shadow:none;
    padding:0;
  }
  .brand-logo{
    width:100%;
    height:120px;
    object-fit:contain;
    filter:
      drop-shadow(0 0 4px rgba(255,255,255,.85))
      drop-shadow(0 0 14px rgba(83,206,255,.62))
      drop-shadow(0 0 30px rgba(83,206,255,.34))
      drop-shadow(0 12px 22px rgba(7,36,102,.18));
  }
}
@media(max-width:900px){
  .brand-logo-shell{min-height:unset;background:transparent;box-shadow:none;padding:0}
  .brand-logo{height:104px;width:100%;object-fit:contain;filter:drop-shadow(0 0 4px rgba(255,255,255,.78)) drop-shadow(0 0 12px rgba(83,206,255,.58)) drop-shadow(0 0 24px rgba(83,206,255,.28))}
}

.side-bottom{margin-top:auto;display:block}
.user-login-card{
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 26px rgba(4,28,88,.16);
  padding:14px;
  color:#fff;
  backdrop-filter:blur(12px);
}
.user-login-head{display:flex;align-items:center;gap:12px}
.user-avatar,.user-avatar-photo{width:56px;height:56px;border-radius:18px;flex:0 0 auto}
.user-avatar{display:grid;place-items:center;background:linear-gradient(145deg,#ff8b3d,#ff5b14);font-weight:800;font-size:22px;color:#fff;box-shadow:0 10px 18px rgba(255,91,20,.28)}
.user-avatar-photo{object-fit:cover;border:2px solid rgba(255,255,255,.88);box-shadow:0 10px 18px rgba(11,47,143,.24)}
.user-meta b{display:block;font-size:16px;line-height:1.2}
.user-meta small{display:block;font-size:12px;opacity:.88;margin-top:3px;line-height:1.45}
.user-status-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.15)}
.login-state{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.12);font-size:11px;font-weight:700}
.login-state:before{content:"";width:8px;height:8px;border-radius:50%;background:#49d66b;box-shadow:0 0 0 4px rgba(73,214,107,.15)}
.login-state.guest:before{background:#ffb243;box-shadow:0 0 0 4px rgba(255,178,67,.16)}
.login-role{font-size:11px;opacity:.84;text-align:right}
.user-login-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.user-login-actions button{border:0;border-radius:14px;padding:11px 12px;font-weight:700;font-size:13px}
.user-login-actions .login-primary{background:#fff;color:var(--blue3);box-shadow:0 10px 18px rgba(255,255,255,.12)}
.user-login-actions .login-soft{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.16)}
.user-login-note{margin-top:10px;font-size:11px;line-height:1.5;color:#e7efff}
.login-user-list{display:grid;gap:9px;margin-top:8px}
.login-user-item{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;transition:.18s}.login-user-item:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(15,52,126,.08);border-color:#bcd0fa}
.login-user-item .left{display:flex;align-items:center;gap:10px}.login-user-item .mini-avatar{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#2b65e7,#0b2f8f);color:#fff;font-weight:800}.login-user-item b{display:block;font-size:14px;color:var(--blue3)}.login-user-item small{display:block;font-size:12px;color:var(--muted);margin-top:2px}.login-chip{display:inline-flex;padding:6px 10px;border-radius:999px;background:#eef4ff;color:#355fa9;font-size:11px;font-weight:700}
.login-manual-box{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
@media(max-width:900px){
  .user-login-card{padding:12px;border-radius:18px}
  .user-login-actions{grid-template-columns:1fr}
}


/* =====================================================================
   V5.6 — user profile moved to Top Bar + compact one-line brand title
   ===================================================================== */
.brand-title-one-line{margin-top:6px!important;text-align:center;white-space:nowrap;overflow:hidden}
.brand-title-one-line b{display:block!important;font-size:15.5px!important;line-height:1.25!important;letter-spacing:.005em}
.brand-title-one-line b span{display:inline!important;font-size:12.5px!important;font-weight:500!important;opacity:.88!important;margin-left:5px!important}

/* Free vertical space in sidebar so every module remains visible */
@media(min-width:901px){
  .brand-block{padding:7px 10px 9px!important;border-radius:21px!important}
  .brand-logo{height:90px!important}
  .side-nav{margin-top:8px!important;gap:4px!important;padding-bottom:6px!important}
  .nav-item{min-height:48px!important;padding-top:6px!important;padding-bottom:6px!important}
  .nav-item b{font-size:15.5px!important}
  .nav-item>span:first-child{width:34px!important;height:34px!important}
}
@media(min-width:901px) and (max-height:820px){
  .brand-logo{height:76px!important}
  .brand-title-one-line b{font-size:14px!important}
  .brand-title-one-line b span{font-size:11px!important}
  .nav-item{min-height:44px!important}
  .side-nav{gap:3px!important}
}

/* Topbar personal user profile */
.topbar-user-card{
  min-width:205px;height:50px;padding:5px 11px 5px 6px;border:1px solid #d7e1f3;border-radius:15px;
  background:linear-gradient(145deg,#ffffff,#f3f7ff);box-shadow:0 8px 18px rgba(16,54,128,.10),inset 0 1px 0 #fff;
  display:grid;grid-template-columns:40px minmax(0,1fr) 16px;gap:9px;align-items:center;text-align:left;color:var(--blue3);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.topbar-user-card:hover{transform:translateY(-2px);border-color:#abc3f5;box-shadow:0 14px 24px rgba(16,54,128,.14),inset 0 1px 0 #fff}
.topbar-user-card .top-user-avatar,.topbar-user-card .top-user-photo{width:40px;height:40px;border-radius:12px}
.topbar-user-card .top-user-avatar{display:grid;place-items:center;background:linear-gradient(145deg,#ff8a37,#ff5b14);color:#fff;font-size:15px;font-weight:800;box-shadow:0 6px 12px rgba(255,91,20,.22)}
.topbar-user-card .top-user-photo{object-fit:cover;border:2px solid #fff;box-shadow:0 5px 10px rgba(11,47,143,.16)}
.topbar-user-card .top-user-meta{min-width:0}.topbar-user-card .top-user-meta b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-user-card .top-user-meta small{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}.topbar-user-card .top-user-arrow{font-size:13px;color:#8090ad;text-align:center}
.topbar-user-card.guest{min-width:150px}.topbar-user-card.guest .top-user-avatar{background:linear-gradient(145deg,#6f91df,#335fb7)}

@media(max-width:1180px){.topbar-user-card{min-width:166px}.topbar-user-card .top-user-meta small{display:none}}
@media(max-width:900px){
  .topbar-user-card{min-width:48px;width:48px;padding:4px;grid-template-columns:40px;border-radius:14px}
  .topbar-user-card .top-user-meta,.topbar-user-card .top-user-arrow{display:none}
}
@media(max-width:640px){.topbar-user-card{display:none}}


/* =====================================================================
   V5.7 — larger technician photo card + machine image + official quotation
   ===================================================================== */
.people-grid{grid-template-columns:repeat(3,1fr);gap:16px}
.person-card{padding:18px;border-radius:20px;background:linear-gradient(180deg,#ffffff,#fbfcff);box-shadow:0 12px 24px rgba(15,52,126,.06)}
.person-card-top{display:grid;grid-template-columns:minmax(0,1fr) 145px;gap:16px;align-items:start}
.person-card-main{min-width:0}
.person-card h4{font-size:30px;line-height:1.08;margin:0 0 6px;color:var(--blue3);font-weight:800;letter-spacing:-.01em}
.person-card p.person-role{font-size:16px;margin:0 0 10px;color:#60708d}
.person-card .person-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.person-card .person-badges .team-badge{margin-top:0}
.person-card .person-phone{font-size:16px;color:#4c5d79;margin:10px 0 0}
.person-hero{width:145px;height:145px;aspect-ratio:1/1;justify-self:end;border-radius:22px;background:linear-gradient(145deg,#f3f7ff,#ffffff);border:1px solid #d8e3fb;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 #fff,0 10px 22px rgba(13,47,121,.08);overflow:hidden}
.person-hero .person-photo,.person-hero .avatar{width:100%;height:100%;border:none;border-radius:0;box-shadow:none;object-fit:cover;object-position:center top}
.person-hero .avatar{font-size:44px;font-weight:800;border-radius:0;background:linear-gradient(145deg,#3f76eb,#0b2f8f)}
.person-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.person-stat{margin-top:0;padding-top:0;border-top:0;display:block;min-width:84px}
.person-stat span{display:block;font-size:13px;color:var(--muted)}
.person-stat b{display:block;font-size:27px;color:var(--blue3);line-height:1.05;margin-top:2px}
.person-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.person-actions .soft-btn,.person-actions .primary-btn{min-width:100px}

.machine-thumb,.machine-thumb-lg,.machine-thumb-placeholder{display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(145deg,#eef4ff,#ffffff);border:1px solid #d8e3fb}
.machine-thumb,.machine-thumb-lg{position:relative}
.machine-thumb{width:68px;height:52px;border-radius:14px;box-shadow:0 8px 16px rgba(13,47,121,.08)}
.machine-thumb img,.machine-thumb-lg img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.machine-reference-badge{position:absolute;right:4px;bottom:4px;max-width:calc(100% - 8px);padding:3px 6px;border-radius:999px;background:rgba(7,31,92,.88);color:#fff;font-size:8px;font-weight:700;line-height:1;white-space:nowrap;box-shadow:0 2px 7px rgba(7,31,92,.2)}
.machine-thumb-lg .machine-reference-badge{right:8px;bottom:8px;padding:5px 8px;font-size:10px}
.machine-thumb-placeholder{width:68px;height:52px;border-radius:14px;color:#5571ab;font-size:11px;font-weight:700;line-height:1.3;text-align:center;padding:6px}
.machine-thumb-lg{width:100%;max-width:360px;height:210px;border-radius:22px;box-shadow:0 14px 28px rgba(13,47,121,.10)}
.machine-thumb-lg.machine-thumb-placeholder{height:210px;font-size:18px;padding:14px}
.machine-cell-name b{display:block;font-size:15px;color:var(--blue3)}
.machine-cell-name small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.machine-photo-line{display:flex;gap:14px;align-items:center;margin-bottom:14px;padding:14px;border:1px dashed var(--line);border-radius:16px;background:#fbfcff}
.machine-photo-preview,.machine-photo-placeholder{width:150px;height:112px;border-radius:18px;display:flex;align-items:center;justify-content:center;border:1px solid #d8e3fb;background:linear-gradient(145deg,#eef4ff,#ffffff);box-shadow:0 10px 20px rgba(13,47,121,.08);overflow:hidden}
.machine-photo-preview{object-fit:cover}
.machine-photo-placeholder{font-size:14px;color:#5c6e8f;font-weight:700;text-align:center;padding:8px}
.machine-detail-layout{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start}

.quote-doc.official{border:1px solid #dadce8;border-radius:0;padding:18px 22px;background:#fff;color:#1d232f}
.quote-paper-header{display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:start;padding-bottom:10px;border-bottom:2px solid #1748a5}
.quote-paper-logo{width:180px;height:82px;object-fit:contain}
.quote-paper-company{font-size:12px;line-height:1.5;color:#222}
.quote-paper-company b{font-size:14px;color:#000}
.quote-paper-title{text-align:center;font-size:22px;font-weight:800;letter-spacing:.02em;margin:6px 0 10px;color:#111}
.quote-paper-meta{display:grid;grid-template-columns:1.2fr .9fr;gap:18px;margin-bottom:8px}
.quote-paper-block .row{display:grid;grid-template-columns:140px 1fr;gap:8px;margin-bottom:6px;font-size:13px;align-items:start}
.quote-paper-block .label{font-weight:700;color:#21306e}
.quote-paper-block .value{color:#111;min-height:18px}
.quote-paper-table table{width:100%;border-collapse:collapse;border:1px solid #444}
.quote-paper-table th,.quote-paper-table td{border:1px solid #444;padding:7px 8px;font-size:12px;vertical-align:top}
.quote-paper-table th{background:#f7f7fb;text-align:center;color:#111;font-weight:700}
.quote-paper-table td.right{text-align:right}
.quote-paper-remark{display:grid;grid-template-columns:90px 1fr;border-left:1px solid #444;border-right:1px solid #444;border-bottom:1px solid #444}
.quote-paper-remark div{padding:8px;font-size:12px}
.quote-paper-remark .label{font-weight:700;color:#21306e;border-right:1px solid #444}
.quote-paper-summary{margin-left:auto;width:340px;border-left:1px solid #444;border-right:1px solid #444;border-bottom:1px solid #444}
.quote-paper-summary .sum-row{display:grid;grid-template-columns:1fr 140px}.quote-paper-summary .sum-row>div{padding:6px 8px;border-top:1px solid #444;font-size:12px}.quote-paper-summary .sum-row b{text-align:right;display:block}.quote-paper-summary .sum-row.total{font-weight:800;color:#21306e}
.quote-paper-sign{display:grid;grid-template-columns:1.1fr .9fr .9fr .9fr;border:1px solid #444;margin-top:12px}
.quote-paper-sign>div{min-height:122px;padding:10px;border-right:1px solid #444;font-size:12px}.quote-paper-sign>div:last-child{border-right:0}.quote-paper-sign b{display:block;margin-bottom:8px}.quote-paper-sign .sign-line{margin-top:42px;text-align:center;font-weight:700}.quote-paper-footer{margin-top:8px;font-size:11px;line-height:1.55;color:#333}

@media(max-width:1200px){.people-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .person-card{padding:16px}
  .person-card-top{grid-template-columns:minmax(0,1fr) 118px;gap:12px;align-items:start}
  .person-card h4{font-size:24px;margin-bottom:4px}
  .person-card p.person-role{font-size:14px;margin-bottom:8px}
  .person-card .person-phone{font-size:14px;margin-top:8px}
  .person-hero{width:118px;height:118px;border-radius:18px}
  .machine-detail-layout{grid-template-columns:1fr}
}
@media(max-width:640px){
  .people-grid{grid-template-columns:1fr}
  .person-card{padding:14px}
  .person-card-top{grid-template-columns:minmax(0,1fr) 104px;gap:10px;align-items:start}
  .person-card h4{font-size:22px;line-height:1.06}
  .person-card p.person-role{font-size:13px;margin-bottom:7px}
  .person-card .person-phone{font-size:13px}
  .person-hero{width:104px;height:104px;border-radius:16px}
  .person-bottom{flex-direction:column;align-items:stretch}
  .person-actions{justify-content:stretch}
  .person-actions>*{flex:1;min-width:0}
}


/* =====================================================================
   V5.8 — Warranty & Machine Document Center
   ===================================================================== */
.module-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;border-radius:24px;padding:22px 24px;margin-bottom:16px;color:#fff;box-shadow:0 16px 34px rgba(13,47,121,.15);overflow:hidden;position:relative}
.module-hero:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-100px;background:rgba(255,255,255,.09)}
.module-hero>div,.module-hero>button{position:relative;z-index:1}.module-hero h2{font-size:29px;margin:4px 0 5px}.module-hero p{font-size:13px;margin:0;color:rgba(255,255,255,.88)}.module-eyebrow{font-size:10px;letter-spacing:.12em;font-weight:700;color:rgba(255,255,255,.72)}
.warranty-hero{background:linear-gradient(135deg,#123d9d,#265fd4 68%,#2f78e8)}.document-hero{background:linear-gradient(135deg,#173c78,#1766a7 62%,#178aa0)}
.module-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:16px}.module-kpi{border:1px solid var(--line);background:#fff;border-radius:18px;padding:15px;display:flex;align-items:center;gap:12px;text-align:left;box-shadow:0 8px 18px rgba(15,52,126,.055);transition:.18s}.module-kpi:hover{transform:translateY(-2px);box-shadow:0 13px 25px rgba(15,52,126,.09)}.module-kpi small{display:block;font-size:12px;color:var(--muted)}.module-kpi b{display:block;font-size:25px;color:var(--blue3);margin-top:2px}.kpi-ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#fff;font-size:18px;font-weight:800}.kpi-ico.green{background:linear-gradient(145deg,#48c666,#238c3b)}.kpi-ico.orange{background:linear-gradient(145deg,#ff9e43,#f25b13)}.kpi-ico.red{background:linear-gradient(145deg,#f06565,#c92b2b)}.kpi-ico.blue{background:linear-gradient(145deg,#3974e9,#123d9d)}
.warranty-status{display:inline-flex;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:700}.warranty-status.active{background:#e4f7e9;color:#26723b}.warranty-status.expiring{background:#fff0d8;color:#936000}.warranty-status.expired{background:#ffe5e5;color:#a23333}.warranty-status.upcoming{background:#e7efff;color:#315da8}.warranty-status.none{background:#eef1f5;color:#637083}
.warranty-machine{display:flex;align-items:center;gap:9px}.warranty-machine .machine-thumb,.warranty-machine .machine-thumb-placeholder{width:54px;height:42px;border-radius:11px}.warranty-machine b{display:block;font-size:13px}.warranty-machine small{display:block;font-size:11px;color:var(--muted);margin-top:2px}.warranty-days{font-size:11px;color:var(--muted);display:block;margin-top:4px}
.warranty-detail-head{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start}.warranty-detail-title h3{font-size:25px;margin:0;color:var(--blue3)}.warranty-detail-title p{font-size:13px;color:var(--muted);margin:4px 0}.warranty-timeline{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:13px;background:#fbfcff;margin:14px 0}.warranty-timeline .datebox{padding:8px}.warranty-timeline small{display:block;color:var(--muted);font-size:11px}.warranty-timeline b{font-size:16px;color:var(--blue3)}.warranty-timeline .arrow{font-size:22px;color:var(--blue)}
.warranty-cert{background:#fff;border:1px solid #cfd5e0;padding:22px;max-width:950px;margin:auto;color:#1d2636}.warranty-cert-head{display:grid;grid-template-columns:210px 1fr;gap:15px;align-items:center;border-bottom:2px solid #e47a22;padding-bottom:10px}.warranty-cert-logo{width:175px;height:78px;object-fit:contain}.warranty-cert-company{font-size:11px;line-height:1.55}.warranty-cert-company b{font-size:13px}.warranty-cert-title{text-align:center;margin:13px 0}.warranty-cert-title h2{margin:0;font-size:24px;color:#123d9d}.warranty-cert-title p{margin:4px 0 0;font-size:13px;letter-spacing:.08em}.warranty-cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.warranty-cert-box{border:1px solid #d7dbe4;padding:10px}.warranty-cert-box small{display:block;color:#657089;font-size:10px}.warranty-cert-box b{display:block;margin-top:4px;font-size:13px}.warranty-cert-section{margin-top:12px;border:1px solid #d7dbe4}.warranty-cert-section h4{margin:0;padding:7px 10px;background:#f3f6fb;color:#123d9d;font-size:12px}.warranty-cert-section div{padding:10px;font-size:12px;line-height:1.6;min-height:55px}.warranty-cert-sign{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}.warranty-cert-sign div{text-align:center;padding-top:38px;border-top:1px solid #555;font-size:12px}
.doc-category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}.doc-category-card{border:1px solid var(--line);border-radius:17px;background:#fff;padding:14px;text-align:left;box-shadow:0 7px 16px rgba(15,52,126,.05);transition:.18s}.doc-category-card:hover{transform:translateY(-2px);border-color:#b9cbf5}.doc-category-card span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#eef4ff;font-size:18px}.doc-category-card b{display:block;font-size:13px;color:var(--blue3);margin-top:8px}.doc-category-card small{display:block;font-size:11px;color:var(--muted);margin-top:2px}.doc-file-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#eef4ff;font-size:18px;flex:0 0 auto}.doc-title-cell{display:flex;align-items:center;gap:10px}.doc-title-cell b{display:block;font-size:13px;color:var(--blue3)}.doc-title-cell small{display:block;font-size:11px;color:var(--muted);margin-top:2px}.doc-category-badge{display:inline-flex;padding:6px 9px;border-radius:999px;background:#eaf2ff;color:#315da8;font-size:11px;font-weight:700}.doc-source{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#315da8}.doc-upload-box{border:1px dashed #b9c8e5;border-radius:15px;padding:13px;background:#fbfcff;margin-bottom:12px}.doc-upload-preview{font-size:12px;color:#52617d;line-height:1.5}.file-warning{font-size:10px;color:#8a6700;background:#fff7de;border-radius:9px;padding:8px;margin-top:7px}.doc-link-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 9px;color:var(--blue);font-size:11px;font-weight:700}
@media(max-width:1150px){.doc-category-grid{grid-template-columns:repeat(3,1fr)}.module-kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.module-hero{flex-direction:column;align-items:flex-start}.module-hero h2{font-size:24px}.warranty-detail-head{grid-template-columns:1fr}.doc-category-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.module-kpi-grid,.doc-category-grid{grid-template-columns:1fr}.warranty-cert-grid{grid-template-columns:1fr}.warranty-cert-head{grid-template-columns:1fr}.warranty-cert-sign{grid-template-columns:1fr}.warranty-timeline{grid-template-columns:1fr}.warranty-timeline .arrow{transform:rotate(90deg);text-align:center}}


/* =====================================================================
   V5.9 — LINE OA Customer Portal + Technician Field Service
   ===================================================================== */
.customer-line-hero,.field-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px;padding:22px 24px;border-radius:22px;background:linear-gradient(135deg,#0c2d80,#1d55c9 68%,#2e75ec);color:#fff;box-shadow:0 16px 34px rgba(11,47,143,.16)}
.customer-line-hero h2,.field-hero h2{font-size:27px;margin:3px 0 5px;color:#fff}.customer-line-hero p,.field-hero p{margin:0;color:#e6efff;font-size:13px;line-height:1.6}.customer-line-hero .soft-btn,.field-hero .soft-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.line-request-panel{margin-top:16px}.line-type{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700}.line-type.service{background:#e8f0ff;color:#315ba8}.line-type.service_quote{background:#e8f7ff;color:#0f6b83}.line-type.warranty_quote{background:#fff0df;color:#95540e}.line-type.warranty_check{background:#e7f7ed;color:#267442}.line-status{font-size:11px;font-weight:700}.line-status.new{color:#dc7114}.line-status.done{color:#258246}

.portal-shell{max-width:520px;margin:0 auto 50px;background:#f6f8fc;min-height:720px;border-radius:28px;overflow:hidden;box-shadow:0 28px 60px rgba(16,45,105,.16);border:1px solid #e2e7f1}.portal-header{padding:14px 16px;background:linear-gradient(145deg,#1549bb,#082d83);color:#fff;display:grid;grid-template-columns:78px 1fr 38px;gap:10px;align-items:center}.portal-header img{width:78px;height:48px;object-fit:contain}.portal-header b{display:block;font-size:17px}.portal-header small{font-size:11px;opacity:.82}.portal-close{width:36px;height:36px;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;font-size:21px}.portal-line-identity{padding:10px 16px;background:#e7f8ec;color:#267442;font-size:11px;font-weight:600}.portal-machine-card{margin:14px;border:1px solid var(--line);border-radius:20px;background:#fff;padding:14px;display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;box-shadow:0 10px 24px rgba(16,54,128,.06)}.portal-machine-card img{width:110px;height:90px;object-fit:cover;border-radius:15px;background:#edf2fb}.portal-machine-card img.is-reference{object-fit:contain;background:#fff;padding:4px}.portal-machine-noimg{width:110px;height:90px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#eef4ff,#fff);border:1px solid #d8e3fb;color:#5571ab;font-size:11px;font-weight:700}.portal-machine-refnote{font-size:10.5px!important;color:#7d8ba5!important;margin:2px 0 0!important}.portal-machine-card h3{margin:0;color:var(--blue3);font-size:19px}.portal-machine-card p{font-size:12px;color:var(--muted);margin:4px 0}.portal-action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 14px 14px}.portal-action-grid button{min-height:112px;border:1px solid var(--line);border-radius:18px;background:#fff;text-align:left;padding:14px;box-shadow:0 8px 18px rgba(16,54,128,.05);transition:.18s}.portal-action-grid button:hover{transform:translateY(-2px);box-shadow:0 14px 24px rgba(16,54,128,.1)}.portal-action-grid span{font-size:25px}.portal-action-grid b{display:block;font-size:14px;color:var(--blue3);margin-top:7px}.portal-action-grid small{display:block;font-size:10px;color:var(--muted);margin-top:3px;line-height:1.4}.portal-content{margin:0 14px 14px;padding:14px;border-radius:18px;background:#fff;border:1px solid var(--line);min-height:90px}.portal-footer{text-align:center;padding:16px;font-size:10px;color:var(--muted)}.portal-form .field{margin-bottom:10px}.portal-history-item{padding:10px 0;border-bottom:1px solid var(--line)}.portal-history-item:last-child{border-bottom:0}.portal-history-item b{font-size:12px;color:var(--blue3)}.portal-history-item small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.portal-warranty-box{display:grid;gap:8px}.portal-warranty-box .big{font-size:25px;color:var(--blue3);font-weight:800}.portal-doc-item{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:11px}
body.customer-portal-mode .sidebar,body.customer-portal-mode .topbar,body.customer-portal-mode .bottom-nav{display:none!important}body.customer-portal-mode .app-shell{display:block}body.customer-portal-mode .main{padding:18px;display:block}body.customer-portal-mode .page{padding-top:0}body.customer-portal-mode{background:linear-gradient(145deg,#eef3ff,#fff)}

.qr-wrap{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:start}.qr-box{width:220px;min-height:220px;display:grid;place-items:center;padding:10px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 24px rgba(16,54,128,.08)}.qr-meta h3{margin:0;color:var(--blue3)}.qr-url{word-break:break-all;padding:10px;border-radius:10px;background:#f5f7fb;font-size:10px;color:#55627a;margin:10px 0}.qr-label-preview{padding:18px;border:1px dashed #aab7d1;border-radius:16px;text-align:center;background:#fff}.qr-label-preview img{width:125px;height:58px;object-fit:contain}

.field-tech-selector{min-width:230px}.field-tech-selector label{display:block;font-size:11px;margin-bottom:5px;color:#dce7ff}.field-tech-selector select{width:100%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;border-radius:13px;padding:11px}.field-tech-selector option{color:#222}.field-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.field-kpi{border:1px solid var(--line);border-radius:18px;background:#fff;padding:14px;box-shadow:0 8px 18px rgba(16,54,128,.05)}.field-kpi small{font-size:11px;color:var(--muted)}.field-kpi b{display:block;font-size:28px;color:var(--blue3);margin-top:4px}.field-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:16px}.field-queue,.field-jobs{padding:12px;display:grid;gap:9px}.field-job-card{border:1px solid var(--line);border-radius:16px;background:#fbfcff;padding:13px}.field-job-card h4{margin:0;color:var(--blue3);font-size:14px}.field-job-card p{font-size:11px;color:var(--muted);margin:4px 0}.field-job-card .job-time{display:inline-flex;padding:5px 8px;border-radius:999px;background:#e8f0ff;color:#315aa6;font-size:10px;font-weight:700}.field-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.field-actions button{padding:8px 10px;font-size:11px}.checklist-grid{display:grid;gap:8px}.checklist-row{display:grid;grid-template-columns:minmax(160px,1fr) 120px 1.2fr;gap:8px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fbfcff}.checklist-row b{font-size:11px}.checklist-row select,.checklist-row input{border:1px solid var(--line);border-radius:9px;padding:8px;font-size:11px;background:#fff}.report-photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}.report-photo{height:95px;border-radius:12px;object-fit:cover;width:100%;border:1px solid var(--line)}.parts-editor{display:grid;gap:7px}.part-row{display:grid;grid-template-columns:130px 1fr 70px 1fr 42px;gap:7px}.part-row input{border:1px solid var(--line);border-radius:9px;padding:8px;font-size:11px}.report-doc{padding:22px;background:#fff;color:#1c2433}.report-doc-head{display:grid;grid-template-columns:190px 1fr;gap:15px;border-bottom:2px solid #e47c27;padding-bottom:9px}.report-doc-head img{width:170px;height:75px;object-fit:contain}.report-doc-head h2{text-align:right;margin:0;color:#102a6b;font-size:21px}.report-doc-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:12px 0}.report-doc-meta div{border:1px solid #d9dee8;padding:8px;font-size:11px}.report-doc table{width:100%;border-collapse:collapse;margin-top:10px}.report-doc th,.report-doc td{border:1px solid #bbb;padding:7px;font-size:10px}.report-photo-section{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.report-photo-section h4{margin:0 0 6px}.report-print-photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.report-print-photo-grid img{width:100%;height:150px;object-fit:cover;border:1px solid #ccc}.report-sign{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.report-sign>div{min-height:80px;border:1px solid #bbb;padding:10px;text-align:center;font-size:11px}

@media(max-width:1000px){.field-layout{grid-template-columns:1fr}.field-kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.customer-line-hero,.field-hero{flex-direction:column;padding:18px}.portal-shell{border-radius:0;min-height:100vh;margin:-18px}.portal-action-grid{grid-template-columns:1fr 1fr}.portal-machine-card{grid-template-columns:90px 1fr}.portal-machine-card img{width:90px;height:78px}.qr-wrap{grid-template-columns:1fr}.qr-box{margin:auto}.field-kpi-grid{grid-template-columns:repeat(2,1fr)}.checklist-row{grid-template-columns:1fr}.part-row{grid-template-columns:1fr 70px}.part-row input:nth-child(3),.part-row input:nth-child(4){grid-column:auto}.report-photo-grid{grid-template-columns:repeat(2,1fr)}}


/* =====================================================================
   V5.10 — Mobile polish / better proportions / cleaner popups
   ===================================================================== */
@media (max-width:900px){
  body{font-size:15px;background:#f5f7fb}
  .main{padding:10px 10px 90px}
  .page{padding-top:10px}
  .topbar{
    top:8px;
    min-height:68px;
    padding:10px 12px;
    border-radius:20px;
    box-shadow:0 10px 22px rgba(25,48,105,.10);
  }
  .topbar h1{font-size:22px;line-height:1.15;margin:0}
  .topbar p{font-size:11px;margin-top:3px}
  .toolbar{gap:8px}
  .search-btn{height:42px;font-size:14px;border-radius:12px}
  .icon-btn{width:42px;height:42px;border-radius:12px}
  .primary-btn,.orange-btn,.soft-btn{padding:10px 14px;font-size:14px;border-radius:13px}

  .sidebar{
    width:min(278px,calc(100vw - 20px));
    left:10px;
    top:10px;
    bottom:10px;
    padding:14px;
    transform:translateX(calc(-100% - 22px));
    transition:transform .22s ease, box-shadow .22s ease;
    border-radius:26px;
    z-index:90;
  }
  .sidebar.open{transform:translateX(0)}
  .brand-block{padding:10px 10px 12px;border-radius:20px}
  .brand-logo-shell{min-height:84px;padding:6px 8px;border-radius:16px}
  .brand-logo{height:72px}
  .brand-title{margin-top:10px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .brand-title b{font-size:14px;line-height:1.2}
  .brand-title span{font-size:11px;line-height:1.2;opacity:.94}
  .side-nav{gap:5px}
  .nav-item{
    min-height:46px;
    grid-template-columns:34px 1fr auto;
    padding:8px 9px;
    font-size:14px;
    border-radius:14px;
  }
  .nav-item b{font-size:14px;line-height:1.2}
  .nav-item > span:first-child{width:32px;height:32px;border-radius:10px;font-size:14px}
  .nav-item .notif-dot{min-width:20px;height:20px;font-size:10px;padding:0 5px}

  .panel{border-radius:20px;box-shadow:0 10px 20px rgba(25,48,105,.06)}
  .panel-head{padding:14px 14px 0}
  .panel-head h3{font-size:19px;line-height:1.2}
  .panel-head p{font-size:11.5px}
  .panel-body{padding:14px}
  .field label{font-size:12px;margin-bottom:6px}
  .field input,.field select,.field textarea,
  .toolbar input,.toolbar select,
  .quote-machine-line select,.quote-machine-line input,
  .quote-part-line input,.quote-part-line select{padding:11px 12px;font-size:14px;border-radius:12px}
  th{font-size:12px} td{font-size:13.5px}
  .badge{font-size:11px;padding:5px 8px}

  .metric-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .metric-card{padding:14px;border-radius:18px}
  .metric-card small{font-size:12px}
  .metric-card strong{font-size:28px}
  .metric-card em{font-size:10.5px}
  .quick-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .quick-grid button{padding:13px;border-radius:16px}
  .quick-grid b{font-size:13px}
  .quick-grid small{font-size:10px}

  .topbar-user-card{min-width:0;padding:8px 10px;gap:8px;border-radius:15px}
  .topbar-user-avatar,.topbar-user-photo{width:36px;height:36px;border-radius:12px}
  .topbar-user-card .top-user-meta b{font-size:12.5px}
  .topbar-user-card .top-user-meta small{font-size:10px;display:block}

  .people-grid{grid-template-columns:1fr;gap:12px}
  .person-card{padding:14px;border-radius:18px}
  .person-card-top{grid-template-columns:minmax(0,1fr) 112px;gap:12px;align-items:start}
  .person-card h4{font-size:24px;line-height:1.08}
  .person-role{font-size:14px!important}
  .person-hero{width:112px;height:112px;aspect-ratio:1/1;border-radius:18px;justify-self:end}
  .person-phone{font-size:14px!important}
  .person-stat b{font-size:24px}

  .field-layout{grid-template-columns:1fr;gap:12px}
  .field-kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .field-kpi{padding:12px;border-radius:16px}
  .field-kpi small{font-size:10px}
  .field-kpi b{font-size:22px}
  .field-job-card{padding:12px;border-radius:14px}
  .field-job-card h4{font-size:13px}
  .field-job-card p{font-size:10.5px}
  .field-actions{gap:6px}
  .field-actions button{padding:7px 9px;font-size:10.5px;border-radius:10px}

  .portal-shell{max-width:100%;border-radius:24px}
  .portal-machine-card{grid-template-columns:88px 1fr;gap:12px;padding:12px;border-radius:16px}
  .portal-machine-card img{width:88px;height:74px;border-radius:12px}
  .portal-machine-card h3{font-size:16px}
  .portal-machine-card p{font-size:11px}
  .portal-action-grid button{min-height:96px;padding:12px;border-radius:16px}
  .portal-action-grid b{font-size:13px}
  .portal-action-grid small{font-size:10px}

  .calendar-toolbar-v2{padding:12px 14px;gap:10px}
  .calendar-filters select,.seg-btn{font-size:13px;padding:10px 13px;border-radius:12px}
  .day-tech-head h4{font-size:15px}
  .month-cell{border-radius:12px}

  .bottom-nav{
    left:8px;right:8px;bottom:8px;
    border:1px solid rgba(198,210,234,.85);
    border-radius:18px;
    box-shadow:0 12px 24px rgba(20,40,90,.08);
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.98)
  }
  .bottom-nav button{font-size:15px}
  .bottom-nav b{font-size:8.8px}
  .bottom-nav .fab span{width:52px;height:52px;font-size:26px;margin-top:-24px}
}

@media (max-width:640px){
  .main{padding:8px 8px 86px}
  .mobile-only{display:block}
  .topbar{min-height:62px;padding:9px 10px;border-radius:18px}
  .topbar h1{font-size:19px}
  .topbar p{font-size:10.5px}
  .search-btn,.icon-btn{height:40px}
  .icon-btn{width:40px}

  .hero-mobile{
    margin:0 -8px 12px;
    padding:12px 12px 16px;
    gap:10px;
    align-items:flex-end;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
    box-shadow:0 16px 30px rgba(10,42,120,.12);
  }
  .hero-logo{width:108px;height:52px}
  .hero-mobile h2{font-size:16px;line-height:1.28;margin-top:6px}
  .hero-mobile p{font-size:10.5px;line-height:1.45}
  .hero-mobile .orange-btn{max-width:110px;padding:10px 12px;font-size:11px;line-height:1.2;border-radius:14px}

  .panel-head h3{font-size:17px}
  .panel-head p{font-size:11px}
  .panel-body{padding:12px}
  .metric-grid,.quick-grid,.field-kpi-grid,.team-summary-grid,.settings-card-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .metric-card{padding:12px;border-radius:16px}
  .metric-card strong{font-size:24px}
  .quick-grid button{padding:12px;border-radius:14px}
  .quick-grid b{font-size:12px}
  .quick-grid small{font-size:9.5px}

  .sidebar{width:min(272px,calc(100vw - 16px));left:8px;top:8px;bottom:8px;padding:12px;border-radius:24px}
  .brand-logo-shell{min-height:76px}
  .brand-logo{height:64px}
  .brand-title{gap:6px}
  .brand-title b{font-size:13px}
  .brand-title span{font-size:10.5px}
  .nav-item{min-height:44px;padding:7px 8px;font-size:13.5px}
  .nav-item b{font-size:13.5px}
  .nav-item > span:first-child{width:30px;height:30px}

  .people-grid,.report-grid,.report-summary,.module-kpi-grid,.doc-category-grid{grid-template-columns:1fr}
  .person-card{padding:14px}
  .person-card-top{grid-template-columns:minmax(0,1fr) 104px;gap:10px;align-items:start}
  .person-card h4{font-size:22px;line-height:1.06}
  .person-role{font-size:13px!important}
  .person-hero{width:104px;height:104px;aspect-ratio:1/1;border-radius:16px;justify-self:end}
  .person-bottom{gap:10px}
  .person-actions .soft-btn,.person-actions .primary-btn{min-width:0;flex:1}

  .modal{
    align-items:flex-end;
    padding:8px 6px 0;
    background:rgba(7,25,71,.46);
  }
  .modal-panel,.modal-panel.small{
    width:100%;
    max-height:88vh;
    border-radius:20px 20px 0 0;
    box-shadow:0 22px 48px rgba(0,0,0,.22);
  }
  .modal-panel::before{width:42px;height:4px;margin:8px auto 2px}
  .modal-head{padding:13px 14px 11px}
  .modal-head h2{font-size:18px;line-height:1.25}
  .modal-head p{font-size:11px;line-height:1.45}
  .close-btn{width:34px;height:34px;border-radius:10px;font-size:20px}
  .modal-body{padding:14px}
  .section-title{font-size:13px}
  .detail-grid{grid-template-columns:1fr;gap:8px}
  .detail-box{padding:10px;border-radius:12px}
  .detail-box small{font-size:10px}.detail-box b{font-size:13px}
  .related-item{padding:10px;border-radius:12px}
  .related-item b{font-size:12px}.related-item small{font-size:10px}
  .more-sheet-grid{grid-template-columns:1fr 1fr;gap:8px}
  .more-sheet-grid button{padding:14px;border-radius:14px;font-size:18px}
  .more-sheet-grid b{font-size:12px}
  .more-sheet-grid small{font-size:9.5px}

  .field input,.field select,.field textarea,
  .toolbar input,.toolbar select,
  .quote-machine-line select,.quote-machine-line input,
  .quote-part-line input,.quote-part-line select{font-size:14px;padding:10px 11px;border-radius:11px}
  .field label{font-size:11.5px}
  .button-row{gap:8px;flex-wrap:wrap}
  .button-row > *{flex:1}

  .customer-line-hero,.field-hero{padding:16px;border-radius:18px;gap:12px}
  .customer-line-hero h2,.field-hero h2{font-size:19px;line-height:1.25}
  .customer-line-hero p,.field-hero p{font-size:11px}
  .field-tech-selector{min-width:0;width:100%}
  .field-kpi b{font-size:20px}
  .field-job-card{padding:11px}
  .field-job-card .job-time{font-size:9.5px}
  .checklist-row{grid-template-columns:1fr;gap:6px;padding:10px}
  .checklist-row b{font-size:11px}
  .checklist-row select,.checklist-row input{font-size:12px;padding:9px}
  .part-row{grid-template-columns:1fr 66px;gap:6px}
  .part-row input{font-size:12px;padding:9px}
  .report-photo-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .report-photo{height:84px;border-radius:10px}

  .portal-shell{border-radius:18px;min-height:unset}
  .portal-header{grid-template-columns:64px 1fr 34px;padding:12px 14px}
  .portal-header img{width:64px;height:42px}
  .portal-header b{font-size:15px}
  .portal-header small{font-size:10px}
  .portal-machine-card{margin:12px;padding:12px}
  .portal-action-grid{padding:0 12px 12px;gap:8px}
  .portal-action-grid{grid-template-columns:1fr 1fr}
  .portal-content{margin:0 12px 12px;padding:12px;border-radius:16px}

  .bottom-nav{left:6px;right:6px;bottom:6px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-radius:16px}
  .bottom-nav button{gap:1px;font-size:14px}
  .bottom-nav b{font-size:8px}
  .bottom-nav .fab span{width:50px;height:50px;font-size:25px;margin-top:-23px}
}


/* =====================================================================
   V5.11 — Field Inspection / Google Maps / Status Media / Signatures
   ===================================================================== */
.map-action-row{display:flex;gap:8px;flex-wrap:wrap}
.context-link-bar{display:flex;gap:8px;flex-wrap:wrap;padding:10px;border:1px solid var(--line);border-radius:15px;background:#f8faff}
.context-link{border:1px solid #d8e2f6;background:#fff;color:var(--blue);border-radius:11px;padding:9px 11px;font-size:12px;font-weight:700}
.context-link.map{background:#eaf7ee;color:#20713b;border-color:#ccebd5}
.field-job-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.field-status-chip{display:inline-flex;padding:5px 9px;border-radius:999px;background:#eef4ff;color:#315da8;font-size:10px;font-weight:700}
.field-location{padding:8px 10px;border-radius:10px;background:#f5f8ff;color:#53637f!important}
.muted-btn{opacity:.5}
.report-type-strip{display:grid;grid-template-columns:auto 180px 1fr;gap:10px;align-items:center;margin-top:14px;padding:12px 14px;border-radius:14px;background:linear-gradient(90deg,#eef4ff,#f9fbff);border:1px solid #d9e3f6}
.report-type-strip b{font-size:13px;color:var(--blue3)}.report-type-strip select{border:1px solid var(--line);border-radius:10px;padding:9px;background:#fff;font-weight:700;color:var(--blue)}.report-type-strip span{font-size:11px;color:var(--muted)}
.status-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.status-media-item{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#f7f9fd;min-height:100px}
.status-media-item img,.status-media-item video{width:100%;height:120px;object-fit:cover;display:block}
.status-media-item button{position:absolute;right:5px;top:5px;width:25px;height:25px;border:0;border-radius:50%;background:rgba(0,0,0,.62);color:#fff}
.status-media-item small{display:block;padding:6px;font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.report-video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}.report-video-item{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#f8faff}.report-video-item video{display:block;width:100%;height:170px;background:#111}.report-video-item>div{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px}.report-video-item small{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-timeline{display:grid;gap:0;padding:4px 0}.status-timeline-item{display:grid;grid-template-columns:18px 1fr;gap:9px;position:relative;padding-bottom:12px}.status-timeline-item:before{content:"";position:absolute;left:7px;top:13px;bottom:-2px;width:2px;background:#dbe4f4}.status-timeline-item:last-child:before{display:none}.status-timeline-item>span{width:16px;height:16px;border-radius:50%;background:linear-gradient(145deg,#3d76ef,#0b2f8f);box-shadow:0 0 0 4px #edf3ff}.status-timeline-item b{font-size:12px;color:var(--blue3)}.status-timeline-item small{display:block;font-size:10px;color:var(--muted);margin-top:2px}.status-timeline-item p{font-size:11px;margin:4px 0 0;color:#4d5b73}
.signature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.signature-box{border:1px solid var(--line);border-radius:15px;background:#fbfcff;padding:10px}.signature-title{font-size:12px;font-weight:700;color:var(--blue3);margin-bottom:7px}.signature-pad{width:100%;height:130px;border:1px dashed #aab9d3;border-radius:10px;background:#fff;touch-action:none}.signature-actions{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:7px}.signature-actions span{font-size:9.5px;color:var(--muted)}
.report-signature-img{display:block;max-width:220px;max-height:70px;object-fit:contain;margin:6px auto}
@media(max-width:640px){.context-link-bar{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:8px}.context-link{padding:9px 8px;font-size:11px}.report-type-strip{grid-template-columns:1fr;gap:7px;padding:10px}.report-type-strip select{width:100%}.status-media-grid{grid-template-columns:repeat(2,1fr)}.status-media-item img,.status-media-item video{height:96px}.report-video-grid{grid-template-columns:1fr}.report-video-item video{height:150px}.signature-grid{grid-template-columns:1fr}.signature-pad{height:120px}.signature-actions{align-items:flex-start}.signature-actions span{max-width:65%}}


/* =====================================================================
   V5.12 — Pro Mobile Bottom Navigation
   ===================================================================== */
@media (max-width:900px){
  .bottom-nav{
    left:10px;
    right:10px;
    bottom:10px;
    grid-template-columns:repeat(5,1fr);
    align-items:end;
    gap:6px;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    border:1px solid rgba(201,213,236,.95);
    border-radius:24px;
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,250,255,.97));
    box-shadow:0 16px 36px rgba(17,40,97,.14), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter:blur(16px);
  }
  .bottom-nav button{
    position:relative;
    min-height:64px;
    padding:6px 4px 4px;
    gap:6px;
    border-radius:18px;
    color:#586682;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  }
  .bottom-nav button span{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:linear-gradient(180deg,#ffffff,#edf3ff);
    border:1px solid rgba(204,216,238,.95);
    box-shadow:0 8px 18px rgba(48,82,155,.13), inset 0 1px 0 rgba(255,255,255,.95);
    color:#244a9c;
    font-size:20px;
    line-height:1;
  }
  .bottom-nav b{
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.01em;
    line-height:1.05;
  }
  .bottom-nav button.active{
    color:#143b8f;
    background:linear-gradient(180deg,rgba(237,244,255,.95),rgba(255,255,255,.75));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.98), 0 8px 18px rgba(45,83,160,.10);
  }
  .bottom-nav button.active span{
    background:linear-gradient(180deg,#5b8dff,#224db3);
    color:#fff;
    border-color:rgba(55,95,190,.9);
    box-shadow:0 10px 22px rgba(34,77,179,.28), inset 0 1px 0 rgba(255,255,255,.35);
    transform:translateY(-1px);
  }
  .bottom-nav button:not(.fab):active{transform:translateY(1px)}

  .bottom-nav .fab{
    min-height:72px;
    align-self:start;
    padding-top:0;
    margin-top:-18px;
    color:#23314c;
  }
  .bottom-nav .fab span{
    width:64px;
    height:64px;
    margin-top:-6px;
    border-radius:22px;
    background:linear-gradient(180deg,#ff8d3c,#ff5f14);
    border:1px solid rgba(255,120,49,.95);
    color:#fff;
    font-size:34px;
    box-shadow:0 18px 28px rgba(255,96,24,.32), inset 0 2px 0 rgba(255,255,255,.28), inset 0 -6px 12px rgba(188,61,0,.18);
  }
  .bottom-nav .fab b{
    color:#20304c;
    font-size:10.8px;
    font-weight:900;
  }
}

@media (max-width:640px){
  .bottom-nav{
    left:8px;
    right:8px;
    bottom:8px;
    gap:4px;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    border-radius:22px;
  }
  .bottom-nav button{
    min-height:60px;
    gap:5px;
    border-radius:16px;
  }
  .bottom-nav button span{
    width:38px;
    height:38px;
    border-radius:14px;
    font-size:18px;
  }
  .bottom-nav b{
    font-size:9.8px;
  }
  .bottom-nav .fab{
    min-height:68px;
    margin-top:-16px;
  }
  .bottom-nav .fab span{
    width:58px;
    height:58px;
    border-radius:20px;
    font-size:31px;
  }
  .bottom-nav .fab b{
    font-size:10.2px;
  }
}

/* V5.13 */
.language-quick-btn{height:44px;min-width:48px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(180deg,#fff,#f2f6ff);color:var(--blue);font-size:12px;font-weight:900;box-shadow:0 6px 14px rgba(20,55,130,.08)}
.datetime-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:8px;width:100%;min-width:0}.datetime-split>div{min-width:0}.datetime-split small{display:block;font-size:10px;color:var(--muted);margin-bottom:5px}.datetime-split input[type=date],.datetime-split input[type=time]{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;background:#fff;padding:11px 10px;font:inherit;color:var(--text)}
.setting-action-card.module-setting{background:linear-gradient(145deg,#fff,#f7fbff);border-color:#d8e5fb}.language-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.language-choice{border:1px solid var(--line);border-radius:18px;padding:18px;background:#fff;cursor:pointer;text-align:center}.language-choice.active{border-color:#7aa1ef;background:#eef4ff}.language-choice input{position:absolute;opacity:0}.language-choice span{display:block;font-size:32px}.language-choice b{display:block;font-size:16px;color:var(--blue3);margin-top:7px}.language-choice small{display:block;font-size:11px;color:var(--muted);margin-top:4px}input[type=date],input[type=time],input[type=datetime-local]{max-width:100%;min-width:0;box-sizing:border-box}
@media(max-width:900px){.language-quick-btn{height:40px;min-width:42px}.form-grid>*{min-width:0}.modal-body,.modal-section,.field{min-width:0;max-width:100%}.settings-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.setting-action-card{min-width:0}}
@media(max-width:640px){.language-quick-btn{height:38px;min-width:38px;font-size:10px;padding:0 7px}.datetime-split{grid-template-columns:minmax(0,1fr) 112px;gap:7px}.datetime-split input[type=date],.datetime-split input[type=time]{font-size:14px;padding:10px 8px}.language-choice-grid{grid-template-columns:1fr}.settings-card-grid{grid-template-columns:1fr}}


/* =====================================================================
   V5.14 — Role & Permission Checkbox UI
   ===================================================================== */
.role-card-list{display:grid;gap:14px;margin-top:12px}.role-card{border:1px solid #dbe3f2;border-radius:18px;background:linear-gradient(180deg,#fff,#fbfcff);box-shadow:0 8px 18px rgba(24,57,125,.05);overflow:hidden}.role-card-head{display:grid;grid-template-columns:minmax(220px,1.1fr) minmax(260px,.95fr) 120px auto;gap:12px;align-items:end;padding:14px 15px;background:#f7f9fd;border-bottom:1px solid var(--line)}.role-card-head.compact{grid-template-columns:minmax(220px,1.1fr) minmax(280px,1fr) 120px auto}.role-name-wrap label,.role-meta-field label{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:5px}.role-name-wrap input,.role-meta-field select{width:100%;border:1px solid var(--line);border-radius:11px;padding:10px 11px;font-size:13px;background:#fff}.role-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.role-auto-count{min-height:58px;border:1px solid #d9e4f7;border-radius:12px;background:#fff;padding:8px 10px}.role-auto-count small,.role-auto-count span{display:block;font-size:9px;color:var(--muted)}.role-auto-count b{display:block;font-size:22px;color:var(--blue3);line-height:1.05;margin:2px 0}.role-head-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.role-head-actions .soft-btn,.role-head-actions .danger-btn{padding:9px 11px;font-size:11px}.role-perm-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 15px;border-bottom:1px solid #e7ebf4}.role-perm-toolbar b{font-size:13px;color:var(--blue3)}.role-perm-toolbar>span{font-size:10px;color:#59709f;background:#eef4ff;border-radius:999px;padding:5px 9px;margin-right:auto}.permission-groups{padding:5px 15px 15px}.permission-groups.compact{padding-top:2px}.permission-group{padding:10px 0;border-bottom:1px dashed #dde4f0}.permission-group:last-child{border-bottom:0}.permission-group h4{font-size:11px;color:#5d6c88;margin:0 0 8px;text-transform:none}.permission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.permission-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.permission-check{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border:1px solid #e1e7f2;border-radius:11px;background:#fff;cursor:pointer;transition:.15s}.permission-check.compact{gap:7px;padding:7px 8px;border-radius:10px}.permission-check:hover{border-color:#b9cdf5;box-shadow:0 6px 12px rgba(25,59,128,.06)}.permission-check:has(input:checked){background:#f0f5ff;border-color:#a9c1f4}.permission-check input{width:17px;height:17px;accent-color:#1749b8;margin-top:1px;flex:0 0 auto}.permission-check.compact input{width:14px;height:14px;margin-top:2px}.permission-check b{display:block;font-size:11.5px;color:var(--blue3);line-height:1.3}.permission-check.compact b{font-size:10.5px;line-height:1.2}.permission-check small{display:block;font-size:8.5px;color:#8a96aa;margin-top:2px}.permission-check.compact small{font-size:7.7px;margin-top:1px}.roles-top-note{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid #d8e3f6;border-radius:14px;background:linear-gradient(90deg,#eef4ff,#fbfdff);margin-bottom:10px}.roles-top-note b{display:block;font-size:13px;color:var(--blue3)}.roles-top-note small{display:block;font-size:10px;color:var(--muted);margin-top:3px;line-height:1.4}
@media(max-width:1100px){.role-card-head,.role-card-head.compact{grid-template-columns:1fr 1fr 110px}.role-head-actions{grid-column:1/-1;justify-content:flex-start}.permission-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:900px){.role-card-head,.role-card-head.compact{grid-template-columns:1fr 1fr}.role-auto-count{grid-column:1/-1}.role-head-actions{grid-column:1/-1;justify-content:flex-start}.permission-grid,.permission-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.role-card-head,.role-card-head.compact{grid-template-columns:1fr}.role-meta-grid{grid-template-columns:1fr}.role-auto-count{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px;min-height:0}.role-auto-count b{font-size:18px}.role-auto-count span{text-align:right}.permission-grid,.permission-grid.compact{grid-template-columns:1fr}.role-perm-toolbar>span{margin-right:0}.roles-top-note{align-items:flex-start}.permission-check,.permission-check.compact{padding:9px 10px}}


/* =====================================================================
   V5.17 — Unified I-MODE Plus Digital Hero Banner System
   ===================================================================== */
.hero-digital,.page-hero,.quotation-head.hero-digital,.settings-hero.hero-digital,.customer-line-hero.hero-digital,.field-hero.hero-digital,.module-hero.hero-digital,.hero-mobile.hero-digital{
  position:relative;overflow:hidden;border-radius:24px;
  background:linear-gradient(135deg,#08256f 0%,#0d3ea5 38%,#1356d4 72%,#0ab6b3 100%);
  color:#fff;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 42px rgba(11,47,143,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-digital::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.95;
  background:
    radial-gradient(circle at 94% 18%, rgba(255,255,255,.10) 0 42px, transparent 43px),
    radial-gradient(circle at 88% 84%, rgba(20,255,214,.18) 0 180px, transparent 181px),
    radial-gradient(circle at 78% 74%, rgba(255,133,24,.35) 0 3px, transparent 6px),
    radial-gradient(circle at 37% 18%, rgba(255,133,24,.85) 0 2px, transparent 7px),
    linear-gradient(90deg, transparent 0 60%, rgba(43,215,255,.18) 60% 61%, transparent 61% 100%),
    linear-gradient(180deg, transparent 0 76%, rgba(43,215,255,.12) 76% 77%, transparent 77% 100%);
}
.hero-digital::after{
  content:"";position:absolute;right:-26px;top:-38px;width:240px;height:240px;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle, rgba(255,255,255,.08) 0 62%, transparent 63% 100%),
    radial-gradient(circle, transparent 0 66%, rgba(55,225,255,.14) 67% 69%, transparent 70% 100%),
    radial-gradient(circle, transparent 0 75%, rgba(255,255,255,.10) 76% 77%, transparent 78% 100%);
  filter:blur(.1px);
}
.hero-digital > *{position:relative;z-index:1}
.hero-copy{position:relative;padding-left:18px}
.hero-copy::before{content:"";position:absolute;left:0;top:42px;width:5px;height:84px;border-radius:999px;background:linear-gradient(180deg,#ff9d45,#ff5b18);box-shadow:0 0 12px rgba(255,120,34,.7)}
.hero-digital .module-eyebrow,.hero-digital .settings-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.14em;font-weight:800;text-transform:uppercase;
  color:#ffae63;margin-bottom:8px;
}
.hero-digital .module-eyebrow::after,.hero-digital .settings-eyebrow::after{
  content:"";display:inline-block;width:86px;height:2px;border-radius:999px;
  background:linear-gradient(90deg, rgba(255,137,43,.25), #ff8e39 55%, rgba(255,204,150,.95));
  box-shadow:0 0 10px rgba(255,144,0,.55);
}
.hero-digital h2{margin:0 0 6px;font-size:36px;line-height:1.15;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.08)}
.hero-digital p{margin:0;color:rgba(244,248,255,.96);font-size:14px;line-height:1.65;max-width:1000px}
.page-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:24px 26px;margin-bottom:16px}
.quotation-head.hero-digital,.settings-hero.hero-digital,.customer-line-hero.hero-digital,.field-hero.hero-digital,.module-hero.hero-digital{padding:24px 26px}
.hero-btn,.hero-digital .primary-btn{background:linear-gradient(145deg,#154ee0,#1238b4);border-color:rgba(255,255,255,.16);box-shadow:0 10px 24px rgba(5,28,98,.35);color:#fff}
.hero-btn:hover,.hero-digital .primary-btn:hover{transform:translateY(-1px)}
.hero-soft,.hero-digital .soft-btn{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(6px)}
.hero-digital .button-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
.page-hero .button-row{align-self:center}
.quotation-head.hero-digital h2{font-size:34px}
.settings-hero.hero-digital .settings-editable-badge{align-self:flex-start;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;box-shadow:none}
.customer-line-hero.hero-digital .soft-btn,.field-hero.hero-digital .soft-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.module-hero.hero-digital.warranty-hero,.module-hero.hero-digital.document-hero,.customer-line-hero.hero-digital,.field-hero.hero-digital,.settings-hero.hero-digital,.quotation-head.hero-digital,.page-hero{background:linear-gradient(135deg,#08256f 0%,#0d3ea5 38%,#1356d4 72%,#0ab6b3 100%)}
.hero-mobile.hero-digital{background:linear-gradient(135deg,#08256f 0%,#0d3ea5 38%,#1356d4 72%,#0ab6b3 100%)}
.hero-mobile.hero-digital .hero-logo{filter:drop-shadow(0 0 8px rgba(255,255,255,.16))}
.hero-mobile.hero-digital h2{font-size:22px}
.hero-mobile.hero-digital p{font-size:12px;color:rgba(244,248,255,.9)}
.hero-mobile.hero-digital > div:first-child{position:relative;padding-left:14px}
.hero-mobile.hero-digital > div:first-child::before{content:"";position:absolute;left:0;top:76px;width:4px;height:56px;border-radius:99px;background:linear-gradient(180deg,#ff9d45,#ff5b18);box-shadow:0 0 10px rgba(255,120,34,.7)}

@media(max-width:1180px){
  .page-hero,.quotation-head.hero-digital,.settings-hero.hero-digital,.customer-line-hero.hero-digital,.field-hero.hero-digital,.module-hero.hero-digital{padding:22px}
  .hero-digital h2{font-size:30px}
  .quotation-head.hero-digital h2{font-size:30px}
}
@media(max-width:900px){
  .page-hero,.quotation-head.hero-digital,.settings-hero.hero-digital,.customer-line-hero.hero-digital,.field-hero.hero-digital,.module-hero.hero-digital{flex-direction:column;align-items:flex-start;padding:20px}
  .hero-digital .button-row{justify-content:flex-start}
  .hero-digital h2{font-size:26px}
  .hero-copy{padding-left:14px}
  .hero-copy::before{top:38px;height:72px}
}
@media(max-width:640px){
  .page-hero,.quotation-head.hero-digital,.settings-hero.hero-digital,.customer-line-hero.hero-digital,.field-hero.hero-digital,.module-hero.hero-digital{padding:16px 16px 18px;border-radius:20px;gap:12px}
  .hero-digital .module-eyebrow,.hero-digital .settings-eyebrow{font-size:9px;letter-spacing:.12em}
  .hero-digital .module-eyebrow::after,.hero-digital .settings-eyebrow::after{width:46px}
  .hero-digital h2{font-size:20px;line-height:1.22}
  .hero-digital p{font-size:11px;line-height:1.5}
  .hero-copy{padding-left:11px}
  .hero-copy::before{width:4px;height:58px;top:34px}
  .hero-mobile.hero-digital{padding:10px 14px 18px}
  .hero-mobile.hero-digital h2{font-size:17px}
  .hero-mobile.hero-digital p{font-size:10.5px}
}


/* =====================================================================
   V5.18 — Personal Font Size & Accessibility
   Font preference is per user/device. Range: 90%–130%.
   ===================================================================== */
:root{--ui-font-scale:1}
.font-quick-btn{height:43px;min-width:76px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#fff,#f7faff);color:var(--blue3);display:flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;box-shadow:0 5px 12px rgba(18,54,130,.06)}
.font-quick-btn .font-aa{font-weight:800;font-size:calc(15px * var(--ui-font-scale));letter-spacing:-.04em}.font-quick-btn b{font-size:10px;color:#5e6f90}
.font-setting-icon{font-size:18px!important;font-weight:800;color:#1848ae;letter-spacing:-.06em}.accessibility-card{background:linear-gradient(180deg,#fff,#f7fbff)}

/* Global scalable type hierarchy */
.nav-item{font-size:calc(15px * var(--ui-font-scale))}
.brand-title b{font-size:calc(15px * var(--ui-font-scale))}.brand-title span{font-size:calc(12px * var(--ui-font-scale))}
.topbar h1{font-size:calc(27px * var(--ui-font-scale))}.topbar p{font-size:calc(13px * var(--ui-font-scale))}
.search-btn,.primary-btn,.orange-btn,.soft-btn,.panel-link{font-size:calc(13px * var(--ui-font-scale))}
.toolbar input,.toolbar select,.field input,.field select,.field textarea{font-size:calc(14px * var(--ui-font-scale))}
.field label{font-size:calc(12px * var(--ui-font-scale))}
.panel-head h3{font-size:calc(19px * var(--ui-font-scale))}.panel-head p{font-size:calc(12px * var(--ui-font-scale))}
th{font-size:calc(12px * var(--ui-font-scale))}td{font-size:calc(14px * var(--ui-font-scale))}
.subtext,.badge,.mini-btn{font-size:calc(11px * var(--ui-font-scale))}
.metric-card small{font-size:calc(13px * var(--ui-font-scale))}.metric-card strong{font-size:calc(31px * var(--ui-font-scale))}.metric-card em{font-size:calc(11px * var(--ui-font-scale))}
.action-row b{font-size:calc(14px * var(--ui-font-scale))}.action-row small{font-size:calc(11px * var(--ui-font-scale))}
.stack-item b{font-size:calc(13px * var(--ui-font-scale))}.stack-item small{font-size:calc(11px * var(--ui-font-scale))}
.quick-grid b{font-size:calc(13px * var(--ui-font-scale))}.quick-grid small{font-size:calc(10px * var(--ui-font-scale))}
.person-card h4{font-size:calc(15px * var(--ui-font-scale))}.person-card p,.person-stat{font-size:calc(12px * var(--ui-font-scale))}
.settings-section-head b{font-size:calc(15px * var(--ui-font-scale))}.settings-section-head small{font-size:calc(11px * var(--ui-font-scale))}
.setting-action-card b{font-size:calc(13px * var(--ui-font-scale))}.setting-action-card small{font-size:calc(10.5px * var(--ui-font-scale))}
.snapshot-item small{font-size:calc(10px * var(--ui-font-scale))}.snapshot-item b{font-size:calc(13px * var(--ui-font-scale))}
.toggle-row b{font-size:calc(12px * var(--ui-font-scale))}.toggle-row small,.setting-help{font-size:calc(10px * var(--ui-font-scale))}
.modal-head h2{font-size:calc(22px * var(--ui-font-scale))}.modal-head p{font-size:calc(11px * var(--ui-font-scale))}
.detail-box small{font-size:calc(10px * var(--ui-font-scale))}.detail-box b{font-size:calc(13px * var(--ui-font-scale))}
.related-item b{font-size:calc(12px * var(--ui-font-scale))}.related-item small{font-size:calc(10px * var(--ui-font-scale))}
.hero-digital h2{font-size:calc(36px * var(--ui-font-scale))}.hero-digital p{font-size:calc(14px * var(--ui-font-scale))}.hero-digital .module-eyebrow,.hero-digital .settings-eyebrow{font-size:calc(11px * var(--ui-font-scale))}
.quote-sum-row{font-size:calc(12px * var(--ui-font-scale))}.quote-grand{font-size:calc(31px * var(--ui-font-scale))}
.calendar-toolbar b,.tech-name{font-size:calc(13px * var(--ui-font-scale))}.tech-role{font-size:calc(10px * var(--ui-font-scale))}
.field-kpi small{font-size:calc(11px * var(--ui-font-scale))}.field-kpi b{font-size:calc(28px * var(--ui-font-scale))}
.field-job-card h4{font-size:calc(14px * var(--ui-font-scale))}.field-job-card p{font-size:calc(11px * var(--ui-font-scale))}
.checklist-row b,.checklist-row select,.checklist-row input{font-size:calc(11px * var(--ui-font-scale))}

/* Font settings modal */
.font-setting-wrap{display:grid;gap:14px}.font-user-note{display:flex;gap:11px;align-items:center;padding:12px 14px;border:1px solid #d9e5fb;border-radius:14px;background:linear-gradient(90deg,#eef5ff,#fbfdff)}.font-user-note>span{width:38px;height:38px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:18px;box-shadow:0 5px 12px rgba(24,72,165,.08)}.font-user-note b{display:block;font-size:13px;color:var(--blue3)}.font-user-note small{display:block;font-size:10px;color:var(--muted);margin-top:2px;line-height:1.45}
.font-current{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:15px;background:#fff}.font-current small{display:block;font-size:10px;color:var(--muted)}.font-current b{font-size:30px;color:var(--blue3);line-height:1}.font-current span{display:block;font-size:11px;color:#56709c;margin-top:4px}.font-stepper{display:flex;gap:8px}.font-stepper button{min-width:58px;height:44px;border:1px solid #cddaf2;border-radius:12px;background:#f5f8ff;color:var(--blue);font-weight:800;font-size:16px}.font-stepper button:hover{background:#eaf2ff}
.font-range{width:100%;accent-color:var(--blue);height:8px}.font-range-labels{display:flex;justify-content:space-between;margin-top:-8px;color:var(--muted);font-size:9px}.font-preset-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.font-preset-grid button{border:1px solid var(--line);border-radius:14px;background:#fff;min-height:88px;display:grid;place-items:center;padding:8px;color:var(--blue3);box-shadow:0 5px 14px rgba(20,58,135,.04);transition:.16s}.font-preset-grid button:hover{transform:translateY(-2px);border-color:#aec5f5;box-shadow:0 10px 18px rgba(20,58,135,.08)}.font-preset-grid button b{font-size:22px}.font-preset-grid button small{font-size:9.5px;line-height:1.35;color:var(--muted);text-align:center}
.font-preview-box{border:1px solid #d8e2f4;border-radius:16px;padding:15px;background:linear-gradient(180deg,#fff,#f8fbff)}.font-preview-box>small{font-size:10px;color:var(--muted)}.font-preview-box h3{font-size:18px;color:var(--blue3);margin:6px 0}.font-preview-box p{font-size:12px;color:var(--muted);margin:0 0 10px}

@media(max-width:900px){
 .hero-digital h2{font-size:calc(26px * var(--ui-font-scale))}.hero-digital p{font-size:calc(12px * var(--ui-font-scale))}
 .topbar h1{font-size:calc(22px * var(--ui-font-scale))}.topbar p{font-size:calc(11px * var(--ui-font-scale))}
 .nav-item{font-size:calc(14px * var(--ui-font-scale))}
}
@media(max-width:640px){
 .font-quick-btn{min-width:62px;height:40px;padding:0 8px}.font-quick-btn .font-aa{font-size:calc(13px * var(--ui-font-scale))}.font-quick-btn b{font-size:9px}
 .font-preset-grid{grid-template-columns:repeat(3,1fr)}
 .font-current b{font-size:26px}.font-stepper button{min-width:52px;height:42px}
 .hero-digital h2{font-size:calc(20px * var(--ui-font-scale))}.hero-digital p{font-size:calc(11px * var(--ui-font-scale))}
 .panel-head h3{font-size:calc(17px * var(--ui-font-scale))}.panel-head p{font-size:calc(11px * var(--ui-font-scale))}
 .setting-action-card b{font-size:calc(12px * var(--ui-font-scale))}.setting-action-card small{font-size:calc(9.5px * var(--ui-font-scale))}
 .bottom-nav b{font-size:calc(9.8px * var(--ui-font-scale))}
}


/* ===== V5.20 Dashboard Refresh + White/Orange Digital Hero ===== */
.dashboard-grid{display:grid;gap:16px;margin-top:16px}
.dashboard-primary{grid-template-columns:1.02fr 1.18fr .95fr}
.dashboard-secondary{grid-template-columns:.95fr 1.15fr .95fr}
.dashboard-list{padding:12px;display:grid;gap:10px}
.dashboard-list-item{width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;text-align:left;color:var(--text);transition:.16s}
.dashboard-list-item:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(17,44,113,.08)}
.dashboard-list-main b{display:block;font-size:14px;color:var(--blue3)}
.dashboard-list-main small{display:block;margin-top:4px;font-size:11px;color:var(--muted)}
.dashboard-list-side{display:flex;flex-direction:column;align-items:flex-end;gap:7px;min-width:132px}
.dashboard-list-side span{font-size:10px;color:var(--muted)}
.status-donut-wrap{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:center}
.status-donut-box{display:grid;place-items:center}
.dashboard-donut{position:relative;width:184px;height:184px;margin:auto}
.status-donut-svg{width:184px;height:184px;display:block}
.donut-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:46px}
.donut-center b{display:block;font-size:38px;line-height:1;color:var(--blue3)}
.donut-center small{display:block;margin-top:5px;font-size:12px;color:var(--muted);line-height:1.45}
.status-legend{display:grid;gap:10px}
.status-legend-item{display:grid;grid-template-columns:12px 1fr;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #edf1fa;border-radius:14px;background:linear-gradient(180deg,#fff,#fbfdff)}
.status-legend-item .dot{width:12px;height:12px;border-radius:999px;margin-top:4px;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 4px rgba(18,59,148,.08)}
.status-legend-item b{display:block;font-size:13px;color:var(--blue3)}
.status-legend-item small{display:block;margin-top:3px;font-size:11px;color:var(--muted)}
.panel-footnote{margin-top:14px;font-size:11px;color:var(--muted)}
.dashboard-team-list{padding:12px;display:grid;gap:10px}
.team-status-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;border:1px solid #edf1fa;border-radius:16px;background:linear-gradient(180deg,#fff,#fbfdff)}
.team-status-main{display:flex;align-items:center;gap:12px;min-width:0}
.team-status-avatar .tech-avatar{width:44px;height:44px;border-radius:14px}
.team-status-main b{display:block;font-size:14px;color:var(--blue3)}
.team-status-main small{display:block;margin-top:4px;font-size:11px;color:var(--muted)}
.team-status-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;white-space:nowrap}
.team-status-side strong{font-size:13px;color:var(--blue3)}
.dashboard-performance{padding:14px}
.dashboard-performance-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.performance-card{border:1px solid #edf1fa;border-radius:18px;padding:14px;background:linear-gradient(180deg,#fff,#fbfdff)}
.performance-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.performance-head b{font-size:13px;color:var(--blue3)}
.performance-head strong{font-size:28px;line-height:1;color:var(--blue3)}
.performance-card small{display:block;margin-top:9px;font-size:10px;color:var(--muted)}
.performance-meter{margin-top:10px;height:10px;border-radius:999px;background:#edf2fb;overflow:hidden}
.performance-meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ffb26b,#ff7b23)}
.performance-card.good .performance-meter i{background:linear-gradient(90deg,#24c16d,#11995d)}
.performance-card.mid .performance-meter i{background:linear-gradient(90deg,#ffbd59,#f28c1a)}
.performance-card.warn .performance-meter i{background:linear-gradient(90deg,#ff8e6a,#f0562b)}
.dashboard-mini-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.dashboard-mini-summary div{border:1px solid #edf1fa;border-radius:15px;padding:12px;background:linear-gradient(180deg,#fff,#fbfdff)}
.dashboard-mini-summary small{display:block;font-size:11px;color:var(--muted)}
.dashboard-mini-summary b{display:block;margin-top:5px;font-size:24px;color:var(--blue3)}

.hero-digital,.page-hero,.quotation-head.hero-digital,.settings-hero.hero-digital,.customer-line-hero.hero-digital,.field-hero.hero-digital,.module-hero.hero-digital,.hero-mobile.hero-digital{
  background:linear-gradient(135deg,#ffffff 0%,#fffaf5 46%,#fff2e4 100%) !important;
  border:1px solid #ffd7bb;
  box-shadow:0 18px 38px rgba(255,123,35,.10), inset 0 1px 0 rgba(255,255,255,.98);
  color:#173a88;
  overflow:hidden;
}
.hero-digital::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.72;
  background:
    linear-gradient(90deg,rgba(255,130,44,.08) 0 2px,transparent 2px 100%),
    linear-gradient(0deg,rgba(255,130,44,.055) 0 2px,transparent 2px 100%),
    radial-gradient(circle at 14% 28%,rgba(255,134,46,.18) 0 3px,transparent 4px),
    radial-gradient(circle at 40% 62%,rgba(37,92,200,.08) 0 2px,transparent 3px),
    linear-gradient(120deg,transparent 0 32%,rgba(255,146,60,.07) 32% 33%,transparent 33% 100%),
    linear-gradient(180deg,rgba(255,255,255,.0),rgba(255,255,255,.35));
  background-size:120px 120px,120px 120px,220px 220px,180px 180px,100% 100%,100% 100%;
}
.hero-digital::after{
  content:"";position:absolute;right:-40px;top:-36px;width:290px;height:290px;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at center,rgba(255,148,68,.16) 0 34%,rgba(255,148,68,.08) 34% 46%,rgba(255,148,68,.04) 46% 58%,transparent 58%),
    radial-gradient(circle at center,rgba(37,94,200,.05) 0 64%,transparent 64%);
}
.hero-digital > *{position:relative;z-index:1}
.hero-digital .module-eyebrow,.hero-digital .settings-eyebrow{color:#f57a23;letter-spacing:.16em;font-weight:800}
.hero-digital .module-eyebrow::after,.hero-digital .settings-eyebrow::after{background:linear-gradient(90deg,#ffb26f,#ff7b23)}
.hero-digital h2{color:#173a88 !important;text-shadow:none}
.hero-digital p{color:#5e6a82 !important;max-width:1080px}
.hero-soft,.hero-digital .soft-btn{background:#fff;color:#173a88;border:1px solid #ffd7bb;box-shadow:0 8px 18px rgba(255,123,35,.10)}
.hero-btn,.hero-digital .primary-btn{background:linear-gradient(180deg,#ff8a34,#f46a16);border-color:#f46a16;box-shadow:0 10px 22px rgba(244,106,22,.24);color:#fff}
.hero-mobile.hero-digital{border-radius:24px}
.hero-mobile.hero-digital .hero-logo{filter:drop-shadow(0 10px 18px rgba(17,44,113,.08))}
.hero-mobile.hero-digital > div:first-child::before{background:linear-gradient(180deg,#ffb56a,#ff7b23);box-shadow:0 0 10px rgba(255,141,56,.42)}
.field-tech-selector label{color:#7a4a21 !important}
.field-tech-selector select{background:#fff !important;color:#173a88 !important;border:1px solid #ffd7bb !important;box-shadow:0 8px 18px rgba(255,123,35,.08)}
.settings-hero.hero-digital .settings-editable-badge{background:#fff3ea;color:#da6b1a;border:1px solid #ffd2b3}
.customer-line-hero.hero-digital .soft-btn,.field-hero.hero-digital .soft-btn{background:#fff;color:#173a88;border-color:#ffd7bb}

@media(max-width:1400px){
  .dashboard-primary,.dashboard-secondary{grid-template-columns:1fr 1fr}
  .dashboard-alert-panel,.dashboard-performance-panel{grid-column:span 1}
}
@media(max-width:1200px){
  .dashboard-primary,.dashboard-secondary{grid-template-columns:1fr}
}
@media(max-width:900px){
  .status-donut-wrap{grid-template-columns:1fr;justify-items:center}
  .dashboard-performance-grid,.dashboard-mini-summary{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .dashboard-grid{gap:12px;margin-top:12px}
  .dashboard-list-item{padding:12px;flex-direction:column;align-items:flex-start}
  .dashboard-list-side{align-items:flex-start;min-width:0}
  .team-status-row{padding:11px 12px;align-items:flex-start}
  .team-status-row,.team-status-main{flex-direction:column;align-items:flex-start}
  .team-status-side{align-items:flex-start}
  .dashboard-donut,.status-donut-svg{width:168px;height:168px}
  .donut-center b{font-size:32px}
  .dashboard-performance-grid,.dashboard-mini-summary{grid-template-columns:1fr}
  .hero-digital::after{width:210px;height:210px;right:-46px;top:-24px}
}


/* =====================================================================
   V5.21 — LINE OA Hero / 3D Buttons
   ===================================================================== */
.line-oa-hero-v521{
  min-height:250px;
  align-items:stretch !important;
  padding:30px 34px !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.99),rgba(255,255,255,.96) 52%,rgba(250,253,255,.96)) !important;
  border:1px solid rgba(193,211,241,.78) !important;
  box-shadow:0 18px 42px rgba(19,58,131,.09),inset 0 1px 0 #fff !important;
}
.line-oa-hero-v521::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  opacity:.78;
  background:
    radial-gradient(circle at 8% 78%,rgba(35,115,230,.11) 0 3px,transparent 4px),
    radial-gradient(circle at 33% 36%,rgba(48,190,224,.10) 0 3px,transparent 4px),
    radial-gradient(circle at 68% 70%,rgba(112,199,104,.12) 0 4px,transparent 5px),
    radial-gradient(circle at 92% 22%,rgba(255,126,34,.15) 0 4px,transparent 5px),
    linear-gradient(90deg,transparent 0 8%,rgba(29,96,210,.07) 8% 8.15%,transparent 8.15% 100%),
    linear-gradient(180deg,transparent 0 77%,rgba(30,103,218,.06) 77% 77.15%,transparent 77.15% 100%);
  background-size:210px 170px,270px 220px,290px 210px,240px 190px,100% 100%,100% 100%;
}
.line-oa-hero-v521::after{
  content:"";position:absolute;right:-40px;bottom:-84px;width:350px;height:350px;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle,transparent 0 31%,rgba(255,130,38,.08) 32% 36%,transparent 37% 43%,rgba(33,124,220,.055) 44% 46%,transparent 47% 56%,rgba(90,196,107,.055) 57% 59%,transparent 60%),
    radial-gradient(circle at 42% 36%,rgba(65,163,224,.055),transparent 56%);
}
.line-oa-hero-v521 .hero-copy{
  max-width:900px;
  align-self:flex-start;
  padding-top:6px;
}
.line-oa-hero-v521 .hero-copy::before{
  background:linear-gradient(180deg,#ff8a2d 0%,#ff7b23 38%,#7fcd62 68%,#2da8dc 100%) !important;
  box-shadow:0 0 14px rgba(255,129,35,.22) !important;
}
.line-oa-hero-v521 h2{font-size:40px !important;letter-spacing:-.02em}
.line-oa-hero-v521 p{font-size:14px !important;color:#65748d !important}
.line-oa-hero-actions{
  position:absolute;
  right:34px;
  bottom:28px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:18px;
}
.line-settings-btn,.portal-cta-btn{
  min-height:64px;
  border:0;
  border-radius:20px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:15px;
  font-weight:850;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
  position:relative;
  overflow:hidden;
}
.line-settings-btn::before,.portal-cta-btn::before{
  content:"";position:absolute;left:10px;right:10px;top:5px;height:42%;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none;
}
.line-settings-btn{
  min-width:205px;
  color:#1c6d29;
  background:linear-gradient(180deg,#efffe5 0%,#d8f6c4 46%,#bfeaa1 100%);
  border:1px solid #a9d887;
  box-shadow:
    0 11px 0 #91c46f,
    0 18px 28px rgba(80,150,70,.21),
    inset 0 2px 2px rgba(255,255,255,.92),
    inset 0 -4px 8px rgba(76,151,62,.12);
}
.portal-cta-btn{
  min-width:280px;
  color:#fff;
  background:linear-gradient(180deg,#ff9a45 0%,#ff7a24 45%,#f65a0b 100%);
  border:1px solid #f56b16;
  box-shadow:
    0 11px 0 #d94c07,
    0 20px 30px rgba(240,91,14,.25),
    inset 0 2px 2px rgba(255,255,255,.37),
    inset 0 -4px 8px rgba(163,52,0,.14);
}
.line-settings-btn .btn-ico,.portal-cta-btn .btn-ico{font-size:24px;line-height:1;position:relative;z-index:1}
.portal-cta-btn strong{font-size:30px;line-height:1;margin-left:2px;position:relative;z-index:1;font-weight:500}
.line-settings-btn span,.portal-cta-btn span{position:relative;z-index:1}
.line-settings-btn:hover,.portal-cta-btn:hover{transform:translateY(-3px);filter:saturate(1.03)}
.line-settings-btn:hover{box-shadow:0 13px 0 #91c46f,0 22px 34px rgba(80,150,70,.25),inset 0 2px 2px rgba(255,255,255,.92)}
.portal-cta-btn:hover{box-shadow:0 13px 0 #d94c07,0 24px 36px rgba(240,91,14,.30),inset 0 2px 2px rgba(255,255,255,.37)}
.line-settings-btn:active,.portal-cta-btn:active{transform:translateY(7px)}
.line-settings-btn:active{box-shadow:0 4px 0 #91c46f,0 9px 16px rgba(80,150,70,.18),inset 0 2px 4px rgba(66,129,53,.08)}
.portal-cta-btn:active{box-shadow:0 4px 0 #d94c07,0 10px 17px rgba(240,91,14,.20),inset 0 2px 4px rgba(130,44,0,.10)}

@media(max-width:1050px){
  .line-oa-hero-v521{min-height:300px;padding:24px !important}
  .line-oa-hero-actions{right:24px;bottom:24px}
  .line-oa-hero-v521 h2{font-size:34px !important}
}
@media(max-width:760px){
  .line-oa-hero-v521{min-height:330px;padding:20px !important}
  .line-oa-hero-v521 h2{font-size:27px !important}
  .line-oa-hero-v521 p{font-size:12px !important}
  .line-oa-hero-actions{position:absolute;left:20px;right:20px;bottom:20px;display:grid;grid-template-columns:1fr 1.2fr;gap:10px}
  .line-settings-btn,.portal-cta-btn{min-width:0;width:100%;min-height:58px;padding:0 14px;border-radius:17px;font-size:12px}
  .line-settings-btn{box-shadow:0 8px 0 #91c46f,0 14px 20px rgba(80,150,70,.18),inset 0 2px 2px rgba(255,255,255,.9)}
  .portal-cta-btn{box-shadow:0 8px 0 #d94c07,0 14px 20px rgba(240,91,14,.21),inset 0 2px 2px rgba(255,255,255,.35)}
  .line-settings-btn .btn-ico,.portal-cta-btn .btn-ico{font-size:20px}
  .portal-cta-btn strong{font-size:23px}
}
@media(max-width:480px){
  .line-oa-hero-v521{min-height:390px}
  .line-oa-hero-actions{grid-template-columns:1fr}
  .line-settings-btn,.portal-cta-btn{min-height:54px}
}


/* =====================================================================
   V5.22 — Compact White LINE OA Hero + Blue 3D Settings Button
   ===================================================================== */
.line-oa-hero-v521{
  min-height:178px !important;
  padding:20px 26px !important;
  background:#ffffff !important;
  border:1px solid rgba(194,210,238,.85) !important;
  box-shadow:0 12px 28px rgba(20,54,120,.07),inset 0 1px 0 #fff !important;
}
.line-oa-hero-v521::before{
  opacity:.46 !important;
  background:
    radial-gradient(circle at 7% 72%,rgba(27,101,221,.10) 0 2px,transparent 3px),
    radial-gradient(circle at 32% 30%,rgba(48,190,224,.08) 0 2px,transparent 3px),
    radial-gradient(circle at 67% 72%,rgba(110,199,104,.08) 0 3px,transparent 4px),
    radial-gradient(circle at 92% 20%,rgba(255,126,34,.10) 0 3px,transparent 4px),
    linear-gradient(90deg,transparent 0 8%,rgba(27,95,205,.055) 8% 8.1%,transparent 8.1% 100%),
    linear-gradient(180deg,transparent 0 74%,rgba(27,95,205,.045) 74% 74.1%,transparent 74.1% 100%) !important;
  background-size:210px 150px,270px 190px,290px 180px,240px 170px,100% 100%,100% 100% !important;
}
.line-oa-hero-v521::after{
  right:-30px !important;
  bottom:-120px !important;
  width:300px !important;
  height:300px !important;
  opacity:.42 !important;
  background:
    radial-gradient(circle,transparent 0 31%,rgba(255,130,38,.07) 32% 36%,transparent 37% 43%,rgba(33,124,220,.05) 44% 46%,transparent 47% 56%,rgba(90,196,107,.04) 57% 59%,transparent 60%) !important;
}
.line-oa-hero-v521 .hero-copy{
  max-width:900px;
  padding-top:0 !important;
  align-self:flex-start;
}
.line-oa-hero-v521 .hero-copy::before{
  top:34px !important;
  height:72px !important;
}
.line-oa-hero-v521 h2{
  font-size:34px !important;
  margin-bottom:4px !important;
}
.line-oa-hero-v521 p{
  font-size:12.5px !important;
  line-height:1.45 !important;
}
.line-oa-hero-actions{
  right:28px !important;
  bottom:18px !important;
  gap:16px !important;
}
.line-settings-btn,.portal-cta-btn{
  min-height:58px !important;
  border-radius:18px !important;
  font-size:14px !important;
}
.line-settings-btn{
  min-width:195px !important;
  color:#ffffff !important;
  background:linear-gradient(180deg,#4f86ff 0%,#2f67dd 46%,#184ebf 100%) !important;
  border:1px solid #285ecf !important;
  box-shadow:
    0 9px 0 #123b91,
    0 16px 26px rgba(33,83,180,.24),
    inset 0 2px 2px rgba(255,255,255,.44),
    inset 0 -4px 8px rgba(13,49,128,.14) !important;
}
.line-settings-btn:hover{
  box-shadow:
    0 11px 0 #123b91,
    0 20px 32px rgba(33,83,180,.29),
    inset 0 2px 2px rgba(255,255,255,.44) !important;
}
.line-settings-btn:active{
  box-shadow:
    0 3px 0 #123b91,
    0 8px 14px rgba(33,83,180,.18),
    inset 0 2px 4px rgba(7,37,105,.15) !important;
}
.portal-cta-btn{
  min-width:268px !important;
  box-shadow:
    0 9px 0 #d94c07,
    0 17px 27px rgba(240,91,14,.24),
    inset 0 2px 2px rgba(255,255,255,.37),
    inset 0 -4px 8px rgba(163,52,0,.14) !important;
}
.portal-cta-btn:hover{
  box-shadow:
    0 11px 0 #d94c07,
    0 21px 33px rgba(240,91,14,.29),
    inset 0 2px 2px rgba(255,255,255,.37) !important;
}
.portal-cta-btn:active{
  box-shadow:
    0 3px 0 #d94c07,
    0 8px 14px rgba(240,91,14,.18),
    inset 0 2px 4px rgba(130,44,0,.10) !important;
}

@media(max-width:1050px){
  .line-oa-hero-v521{min-height:215px !important;padding:18px 20px !important}
  .line-oa-hero-v521 h2{font-size:29px !important}
  .line-oa-hero-actions{right:20px !important;bottom:18px !important}
}
@media(max-width:760px){
  .line-oa-hero-v521{min-height:270px !important;padding:16px !important}
  .line-oa-hero-v521 h2{font-size:24px !important}
  .line-oa-hero-v521 p{font-size:11px !important}
  .line-oa-hero-actions{left:16px !important;right:16px !important;bottom:16px !important;grid-template-columns:1fr 1.18fr !important;gap:9px !important}
  .line-settings-btn,.portal-cta-btn{min-height:52px !important;font-size:11.5px !important;border-radius:15px !important;padding:0 12px !important}
  .line-settings-btn{box-shadow:0 7px 0 #123b91,0 12px 18px rgba(33,83,180,.20),inset 0 2px 2px rgba(255,255,255,.42) !important}
  .portal-cta-btn{box-shadow:0 7px 0 #d94c07,0 12px 18px rgba(240,91,14,.20),inset 0 2px 2px rgba(255,255,255,.34) !important}
}
@media(max-width:480px){
  .line-oa-hero-v521{min-height:320px !important}
  .line-oa-hero-actions{grid-template-columns:1fr !important}
  .line-settings-btn,.portal-cta-btn{min-height:50px !important}
}


/* =====================================================================
   V5.23 — Unified Compact White Hero Banner across ALL modules
   I-MODE Plus palette: Blue / Cyan / Soft Green / Orange
   ===================================================================== */
.hero-digital,
.page-hero.hero-digital,
.quotation-head.hero-digital,
.settings-hero.hero-digital,
.customer-line-hero.hero-digital,
.field-hero.hero-digital,
.module-hero.hero-digital,
.hero-mobile.hero-digital{
  position:relative !important;
  min-height:148px !important;
  padding:18px 24px !important;
  border-radius:22px !important;
  background:#ffffff !important;
  border:1px solid rgba(190,207,237,.9) !important;
  color:#173a88 !important;
  box-shadow:0 12px 28px rgba(20,54,120,.075), inset 0 1px 0 rgba(255,255,255,1) !important;
  overflow:hidden !important;
  align-items:center !important;
  margin-bottom:16px !important;
}

/* translucent circuit pattern using I-MODE colors */
.hero-digital::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  opacity:.58 !important;
  background:
    radial-gradient(circle at 7% 72%,rgba(31,95,205,.14) 0 2px,transparent 3px),
    radial-gradient(circle at 31% 30%,rgba(54,190,226,.12) 0 2px,transparent 3px),
    radial-gradient(circle at 66% 72%,rgba(120,202,112,.13) 0 3px,transparent 4px),
    radial-gradient(circle at 92% 20%,rgba(255,126,34,.14) 0 3px,transparent 4px),
    linear-gradient(90deg,transparent 0 8%,rgba(27,95,205,.075) 8% 8.12%,transparent 8.12% 100%),
    linear-gradient(180deg,transparent 0 74%,rgba(34,184,218,.065) 74% 74.12%,transparent 74.12% 100%),
    linear-gradient(135deg,transparent 0 31%,rgba(255,132,38,.045) 31% 31.12%,transparent 31.12% 100%) !important;
  background-size:210px 150px,270px 190px,290px 180px,240px 170px,100% 100%,100% 100%,100% 100% !important;
}
.hero-digital::after{
  content:"" !important;
  position:absolute !important;
  right:-22px !important;
  bottom:-118px !important;
  top:auto !important;
  width:292px !important;
  height:292px !important;
  border-radius:50% !important;
  opacity:.48 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle,transparent 0 31%,rgba(255,130,38,.085) 32% 36%,transparent 37% 43%,rgba(33,124,220,.07) 44% 46%,transparent 47% 56%,rgba(98,196,107,.065) 57% 59%,transparent 60%) !important;
}
.hero-digital > *{position:relative !important;z-index:1 !important}

.hero-digital .hero-copy{
  max-width:1040px !important;
  padding-left:16px !important;
  padding-top:0 !important;
  align-self:center !important;
}
.hero-digital .hero-copy::before{
  content:"" !important;
  left:0 !important;
  top:31px !important;
  width:4px !important;
  height:62px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#ff7a21 0%,#ff9c3e 40%,#7bce72 72%,#35abd7 100%) !important;
  box-shadow:0 0 9px rgba(255,123,35,.18) !important;
}
.hero-digital .module-eyebrow,
.hero-digital .settings-eyebrow{
  color:#f36f17 !important;
  font-size:10px !important;
  letter-spacing:.16em !important;
  font-weight:800 !important;
  margin-bottom:6px !important;
}
.hero-digital .module-eyebrow::after,
.hero-digital .settings-eyebrow::after{
  width:72px !important;
  height:2px !important;
  background:linear-gradient(90deg,#ffb16a,#ff7920) !important;
  box-shadow:none !important;
}
.hero-digital h2{
  color:#173a88 !important;
  font-size:30px !important;
  line-height:1.14 !important;
  margin:0 0 4px !important;
  text-shadow:none !important;
}
.hero-digital p{
  color:#64718a !important;
  font-size:12px !important;
  line-height:1.48 !important;
  margin:0 !important;
  max-width:1000px !important;
}

/* Hero action buttons: blue 3D as system standard */
.hero-digital .button-row{display:flex !important;gap:12px !important;align-items:center !important;justify-content:flex-end !important;flex-wrap:wrap !important}
.hero-digital .primary-btn,
.hero-digital .hero-btn,
.module-hero.hero-digital > .primary-btn{
  min-height:48px !important;
  padding:0 18px !important;
  border-radius:15px !important;
  color:#fff !important;
  background:linear-gradient(180deg,#4e84f8 0%,#2e66dc 48%,#184eba 100%) !important;
  border:1px solid #285ecd !important;
  box-shadow:
    0 6px 0 #123b91,
    0 12px 20px rgba(34,83,180,.20),
    inset 0 2px 2px rgba(255,255,255,.38),
    inset 0 -3px 6px rgba(12,49,128,.12) !important;
  font-weight:800 !important;
  transition:transform .15s ease, box-shadow .15s ease !important;
}
.hero-digital .primary-btn:hover,
.hero-digital .hero-btn:hover,
.module-hero.hero-digital > .primary-btn:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 8px 0 #123b91,0 16px 25px rgba(34,83,180,.24),inset 0 2px 2px rgba(255,255,255,.38) !important;
}
.hero-digital .primary-btn:active,
.hero-digital .hero-btn:active,
.module-hero.hero-digital > .primary-btn:active{
  transform:translateY(4px) !important;
  box-shadow:0 2px 0 #123b91,0 6px 12px rgba(34,83,180,.16),inset 0 2px 4px rgba(7,37,105,.13) !important;
}

/* Secondary hero action: raised white/blue button */
.hero-digital .soft-btn,
.hero-digital .hero-soft{
  min-height:48px !important;
  padding:0 17px !important;
  border-radius:15px !important;
  color:#174ba8 !important;
  background:linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%) !important;
  border:1px solid #cad8f1 !important;
  box-shadow:
    0 5px 0 #d2dcf0,
    0 10px 18px rgba(24,73,159,.10),
    inset 0 2px 2px #fff !important;
  font-weight:800 !important;
  transition:transform .15s ease, box-shadow .15s ease !important;
}
.hero-digital .soft-btn:hover,.hero-digital .hero-soft:hover{transform:translateY(-2px) !important;box-shadow:0 7px 0 #d2dcf0,0 14px 22px rgba(24,73,159,.13),inset 0 2px 2px #fff !important}
.hero-digital .soft-btn:active,.hero-digital .hero-soft:active{transform:translateY(3px) !important;box-shadow:0 2px 0 #d2dcf0,0 5px 10px rgba(24,73,159,.08) !important}

/* Special orange CTA remains for customer portal and any explicit orange action */
.hero-digital .orange-btn,
.hero-digital .portal-cta-btn{
  color:#fff !important;
  background:linear-gradient(180deg,#ff8d38 0%,#ff7019 48%,#ed5605 100%) !important;
  border:1px solid #ec5c0c !important;
  box-shadow:0 7px 0 #d94c07,0 14px 24px rgba(240,91,14,.22),inset 0 2px 2px rgba(255,255,255,.34) !important;
}

/* Settings banner badge */
.settings-hero.hero-digital .settings-editable-badge{
  background:#f5f8ff !important;
  color:#2357b6 !important;
  border:1px solid #cbd9f1 !important;
  border-radius:999px !important;
  padding:8px 12px !important;
  box-shadow:0 5px 0 #d2dcf0,0 10px 16px rgba(31,78,164,.08) !important;
}

/* LINE OA keeps its dedicated two CTA layout but conforms to global white hero */
.line-oa-hero-v521{min-height:148px !important;padding:18px 24px !important}
.line-oa-hero-v521 h2{font-size:30px !important}
.line-oa-hero-v521 p{font-size:12px !important}
.line-oa-hero-actions{right:24px !important;bottom:17px !important;gap:14px !important}
.line-settings-btn,.portal-cta-btn{min-height:50px !important;border-radius:15px !important;font-size:13px !important}
.line-settings-btn{min-width:180px !important}
.portal-cta-btn{min-width:246px !important}

/* Desktop hero-specific layout normalisation */
.page-hero.hero-digital,
.quotation-head.hero-digital,
.customer-line-hero.hero-digital,
.field-hero.hero-digital,
.module-hero.hero-digital,
.settings-hero.hero-digital{
  display:flex !important;
  flex-direction:row !important;
  justify-content:space-between !important;
  gap:18px !important;
}
.module-hero.hero-digital > .primary-btn{align-self:center !important}
.quotation-head.hero-digital .button-row{align-self:center !important}
.field-hero.hero-digital .field-tech-selector{align-self:center !important}

@media(max-width:1050px){
  .hero-digital,.page-hero.hero-digital,.quotation-head.hero-digital,.settings-hero.hero-digital,.customer-line-hero.hero-digital,.field-hero.hero-digital,.module-hero.hero-digital{min-height:160px !important;padding:17px 20px !important}
  .hero-digital h2{font-size:27px !important}
  .hero-digital p{font-size:11.5px !important}
  .hero-digital .module-eyebrow,.hero-digital .settings-eyebrow{font-size:9.5px !important}
}
@media(max-width:760px){
  .hero-digital,.page-hero.hero-digital,.quotation-head.hero-digital,.settings-hero.hero-digital,.customer-line-hero.hero-digital,.field-hero.hero-digital,.module-hero.hero-digital{min-height:auto !important;padding:15px 15px 18px !important;border-radius:19px !important;flex-direction:column !important;align-items:flex-start !important;gap:13px !important}
  .hero-digital .hero-copy{padding-left:11px !important;width:100% !important}
  .hero-digital .hero-copy::before{top:29px !important;height:54px !important;width:3px !important}
  .hero-digital h2{font-size:22px !important}
  .hero-digital p{font-size:10.5px !important;line-height:1.5 !important}
  .hero-digital .module-eyebrow,.hero-digital .settings-eyebrow{font-size:8.5px !important}
  .hero-digital .button-row{justify-content:flex-start !important;width:100% !important}
  .hero-digital .primary-btn,.hero-digital .hero-btn,.hero-digital .soft-btn,.hero-digital .hero-soft,.module-hero.hero-digital > .primary-btn{min-height:44px !important;font-size:11px !important;border-radius:13px !important}
  .settings-hero.hero-digital .settings-editable-badge{align-self:flex-start !important}
  .line-oa-hero-v521{min-height:248px !important;padding:15px !important}
  .line-oa-hero-actions{left:15px !important;right:15px !important;bottom:15px !important;grid-template-columns:1fr 1.15fr !important;gap:9px !important}
  .line-settings-btn,.portal-cta-btn{min-height:46px !important;font-size:10.8px !important;border-radius:13px !important;padding:0 10px !important}
}
@media(max-width:480px){
  .hero-digital h2{font-size:20px !important}
  .line-oa-hero-v521{min-height:286px !important}
  .line-oa-hero-actions{grid-template-columns:1fr !important}
}


/* =====================================================================
   V5.24 — Remove module Hero Banners / Reposition actions
   ===================================================================== */
.module-action-row{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 12px;
}
.module-action-row .module-utility-btn,
.compact-action{
  min-height:40px;
  padding:9px 14px;
  border-radius:12px;
  font-size:12px;
  font-weight:800;
  box-shadow:0 7px 16px rgba(24,59,126,.08);
}
.module-action-row .module-portal-btn{
  min-height:42px;
  padding:10px 17px;
  border-radius:13px;
  font-size:12px;
  font-weight:850;
  box-shadow:0 10px 20px rgba(255,102,20,.20), inset 0 1px 0 rgba(255,255,255,.35);
}
.customer-module-actions{margin-top:0}
.report-module-actions{margin-bottom:10px}
.plain-module-intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 14px;
  padding:2px 2px 8px;
  border-bottom:1px solid #e8edf6;
}
.plain-module-intro h2{margin:0;color:var(--blue3);font-size:24px;line-height:1.2}
.plain-module-intro p{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
.plain-status-badge{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  padding:7px 11px;
  border-radius:999px;
  background:#eef5ff;
  border:1px solid #d9e5fa;
  color:#1f53b8;
  font-size:10.5px;
  font-weight:800;
}
/* The page header at the top of the app now acts as the module title.
   Panels carry their own contextual actions to avoid duplicate CTAs. */
#page-cases>.panel:first-of-type,
#page-machines>.panel:first-of-type,
#page-technicians>.panel:first-of-type,
#page-calendar>.panel:first-of-type,
#page-notifications>.panel:first-of-type,
#page-warranty>.module-kpi-grid,
#page-documents>.doc-category-grid,
#page-reports>.module-action-row,
#page-customers>.module-action-row,
#page-settings>.plain-module-intro,
#page-quotation>.quotation-layout{margin-top:0}

@media(max-width:640px){
  .module-action-row{justify-content:stretch;gap:8px;margin-bottom:10px}
  .module-action-row>button{flex:1;min-width:0}
  .plain-module-intro{align-items:flex-start;flex-direction:column;gap:8px}
  .plain-module-intro h2{font-size:20px}
  .plain-status-badge{align-self:flex-start}
}


/* =====================================================================
   V5.25 — Orange 3D Important Actions
   ===================================================================== */
.action-3d-orange,
.action-3d-orange-soft{
  position:relative;
  isolation:isolate;
  border-radius:14px !important;
  min-height:42px;
  padding:10px 17px !important;
  font-weight:850 !important;
  letter-spacing:.01em;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  will-change:transform;
}
.action-3d-orange{
  color:#fff !important;
  border:1px solid #ee6610 !important;
  background:linear-gradient(180deg,#ff9a4b 0%,#ff7b22 46%,#ef5f0b 100%) !important;
  box-shadow:
    0 5px 0 #b94705,
    0 12px 22px rgba(238,95,11,.25),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -2px 0 rgba(164,58,0,.16) !important;
  text-shadow:0 1px 0 rgba(129,42,0,.2);
}
.action-3d-orange-soft{
  color:#b64e06 !important;
  border:1px solid #ffc18f !important;
  background:linear-gradient(180deg,#fff8f1 0%,#ffe8d4 52%,#ffd4b2 100%) !important;
  box-shadow:
    0 4px 0 #e7a36c,
    0 10px 19px rgba(239,112,29,.15),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.action-3d-orange::before,
.action-3d-orange-soft::before{
  content:"";
  position:absolute;
  left:9px;right:9px;top:5px;height:36%;
  border-radius:10px 10px 45% 45%;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));
  z-index:-1;
  pointer-events:none;
}
.action-3d-orange:hover,
.action-3d-orange-soft:hover{
  transform:translateY(-2px);
  filter:saturate(1.06) brightness(1.02);
}
.action-3d-orange:hover{
  box-shadow:0 7px 0 #b94705,0 16px 28px rgba(238,95,11,.30),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 0 rgba(164,58,0,.16) !important;
}
.action-3d-orange-soft:hover{
  box-shadow:0 6px 0 #e7a36c,0 14px 24px rgba(239,112,29,.20),inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.action-3d-orange:active,
.action-3d-orange-soft:active{
  transform:translateY(3px) scale(.995);
}
.action-3d-orange:active{
  box-shadow:0 1px 0 #b94705,0 5px 9px rgba(238,95,11,.20),inset 0 2px 5px rgba(138,48,0,.18) !important;
}
.action-3d-orange-soft:active{
  box-shadow:0 1px 0 #e7a36c,0 4px 8px rgba(239,112,29,.13),inset 0 2px 5px rgba(171,73,10,.10) !important;
}
.quote-main-action{font-size:14px !important;min-height:46px !important}

/* Settings: orange is used as an accent, not a full-card fill. */
.settings-section-accent{
  position:relative;
  padding-left:14px !important;
}
.settings-section-accent::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:999px;
  background:linear-gradient(180deg,#ff9c4a,#f56c15);
  box-shadow:0 0 10px rgba(245,108,21,.24);
}
.settings-section-accent b{color:#173a88}
.setting-card-accent{
  position:relative;
  overflow:hidden;
  border-color:#f5e1d1 !important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.setting-card-accent::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,#ff9a4b 22%,#ff7b22 62%,transparent);
  opacity:.55;
}
.setting-card-accent:hover{
  transform:translateY(-2px);
  border-color:#ffc89f !important;
  box-shadow:0 12px 24px rgba(232,94,14,.10) !important;
}
.setting-card-accent .setting-icon{
  box-shadow:0 6px 12px rgba(239,111,28,.08);
}

@media(max-width:640px){
  .action-3d-orange,.action-3d-orange-soft{min-height:40px;padding:9px 13px !important;font-size:11px !important}
  .quote-main-action{min-height:44px !important;font-size:12px !important}
}


/* =====================================================================
   V5.26 — Orange 3D Actions + Full Settings Typography Scaling
   ===================================================================== */
.ui-emphasis-action{
  font-size:calc(13px * var(--ui-font-scale)) !important;
  line-height:1.15;
  white-space:nowrap;
}
/* Stronger orange 3D depth for the final highlighted actions. */
.ui-emphasis-action.action-3d-orange{
  background:linear-gradient(180deg,#ffad67 0%,#ff862f 34%,#f46b13 72%,#e95805 100%) !important;
  border:1px solid #e95e08 !important;
  color:#fff !important;
  box-shadow:
    0 6px 0 #a83d03,
    0 13px 24px rgba(230,82,4,.27),
    inset 0 2px 0 rgba(255,255,255,.68),
    inset 0 -3px 0 rgba(157,48,0,.16) !important;
}
.ui-emphasis-action.action-3d-orange-soft,
.settings-edit-badge{
  background:linear-gradient(180deg,#fffaf5 0%,#ffe9d6 45%,#ffd1aa 100%) !important;
  border:1px solid #ffb476 !important;
  color:#b84e07 !important;
  box-shadow:
    0 5px 0 #da8a4a,
    0 11px 20px rgba(235,105,21,.18),
    inset 0 2px 0 rgba(255,255,255,.92),
    inset 0 -2px 0 rgba(196,82,8,.08) !important;
}
.ui-emphasis-action.action-3d-orange:hover{transform:translateY(-2px);box-shadow:0 8px 0 #a83d03,0 18px 30px rgba(230,82,4,.31),inset 0 2px 0 rgba(255,255,255,.72),inset 0 -3px 0 rgba(157,48,0,.16) !important}
.ui-emphasis-action.action-3d-orange-soft:hover{transform:translateY(-2px);box-shadow:0 7px 0 #da8a4a,0 15px 26px rgba(235,105,21,.22),inset 0 2px 0 rgba(255,255,255,.95) !important}
.ui-emphasis-action:active{transform:translateY(4px) scale(.995) !important}
.ui-emphasis-action.action-3d-orange:active{box-shadow:0 1px 0 #a83d03,0 5px 9px rgba(230,82,4,.18),inset 0 3px 7px rgba(128,39,0,.22) !important}
.ui-emphasis-action.action-3d-orange-soft:active{box-shadow:0 1px 0 #da8a4a,0 4px 8px rgba(235,105,21,.12),inset 0 3px 6px rgba(165,69,5,.10) !important}
.settings-edit-badge{
  position:relative;
  min-height:34px;
  padding:8px 13px !important;
  border-radius:12px !important;
  font-size:calc(10.5px * var(--ui-font-scale)) !important;
  font-weight:850;
  letter-spacing:.01em;
}

/* The Settings page had late fixed px rules that bypassed the user font-size setting.
   These final rules guarantee that every heading/description in the highlighted areas
   follows A-/A/A+ and the 90–130% accessibility preference. */
#page-settings .plain-module-intro h2{
  font-size:calc(24px * var(--ui-font-scale)) !important;
  line-height:1.2;
}
#page-settings .plain-module-intro p{
  font-size:calc(11px * var(--ui-font-scale)) !important;
  line-height:1.55;
}
#page-settings .settings-section-head b{
  font-size:calc(15px * var(--ui-font-scale)) !important;
  line-height:1.3;
}
#page-settings .settings-section-head small{
  font-size:calc(11px * var(--ui-font-scale)) !important;
  line-height:1.5;
}
#page-settings .setting-action-card b{
  font-size:calc(13px * var(--ui-font-scale)) !important;
  line-height:1.35;
}
#page-settings .setting-action-card small{
  font-size:calc(10.5px * var(--ui-font-scale)) !important;
  line-height:1.45;
}
#page-settings .plain-status-badge{
  font-size:calc(10.5px * var(--ui-font-scale)) !important;
}
#page-settings .info-box,
#page-settings .panel-head p,
#page-settings .field label,
#page-settings .setting-help,
#page-settings .snapshot-item small,
#page-settings .snapshot-item b{
  font-size:calc(11px * var(--ui-font-scale)) !important;
}

@media(max-width:900px){
  .ui-emphasis-action{font-size:calc(12px * var(--ui-font-scale)) !important}
  #page-settings .plain-module-intro h2{font-size:calc(21px * var(--ui-font-scale)) !important}
}
@media(max-width:640px){
  .ui-emphasis-action{font-size:calc(11px * var(--ui-font-scale)) !important;white-space:normal;text-align:center}
  #page-settings .plain-module-intro h2{font-size:calc(19px * var(--ui-font-scale)) !important}
  #page-settings .plain-module-intro p{font-size:calc(10.5px * var(--ui-font-scale)) !important}
  #page-settings .settings-section-head b{font-size:calc(13px * var(--ui-font-scale)) !important}
  #page-settings .settings-section-head small{font-size:calc(10px * var(--ui-font-scale)) !important}
}


/* V5.28 Customer Database Demo + Bilingual Machine Names */
.demo-data-badge{display:inline-flex;margin-left:8px;padding:3px 7px;border-radius:999px;background:#fff0e5;color:#e86b17;border:1px solid #ffd2b3;font-size:9px;font-weight:800;vertical-align:middle}.demo-master-toolbar{grid-template-columns:minmax(260px,1.5fr) minmax(170px,.5fr) minmax(170px,.5fr)}#page-customers .demo-master-toolbar{grid-template-columns:minmax(280px,1fr) 190px}.machine-name-alt{display:block!important;margin-top:3px!important;font-size:11px!important;color:#456492!important;font-weight:600}.machine-alt-mobile{font-weight:700;color:#48628d!important;margin:2px 0 4px!important}.service-contract-badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:#f1f3f7;color:#68758e;font-size:10px;font-weight:800;white-space:nowrap}.service-contract-badge.on{background:#e4f7e9;color:#25713b}.service-contract-badge.off{background:#fff0e7;color:#9a521e}.machine-status-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;color:var(--muted);font-size:11px}.bilingual-machine-detail b{font-size:18px!important;color:var(--blue3)}.bilingual-machine-detail span{display:block;margin-top:4px;font-size:14px;color:#54709e;font-weight:700}@media(max-width:900px){.demo-master-toolbar,#page-customers .demo-master-toolbar{grid-template-columns:1fr 1fr}.demo-master-toolbar input{grid-column:1/-1}}@media(max-width:640px){.demo-master-toolbar,#page-customers .demo-master-toolbar{grid-template-columns:1fr}.demo-master-toolbar input{grid-column:auto}.demo-data-badge{display:inline-flex;margin-left:0;margin-top:5px}.machine-name-alt{font-size:10px!important}}

/* V5.29 machine service-size badges */
.machine-size-badge{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:32px;padding:0 10px;border-radius:11px;font-weight:900;font-size:13px;border:1px solid #cfdaf3;box-shadow:0 5px 12px rgba(18,59,143,.08)}
.machine-size-badge.S{background:#eaf2ff;color:#174ea6;border-color:#b9cdf8}.machine-size-badge.M{background:#e9f7ee;color:#1a7040;border-color:#a5dcbb}.machine-size-badge.L{background:#fff0e8;color:#b54708;border-color:#ffc79f}.machine-size-badge.confirm{background:#fff7d6;color:#8a5700;border-color:#f6d365;font-size:11px}.machine-mobile-meta{display:flex;flex-direction:column;gap:6px;align-items:flex-end}

/* V5.30 Warranty / Google Maps / Quotation refinements */
.quote-paper-logo{width:210px!important;height:92px!important;object-fit:contain!important;object-position:left center}
.quote-distance-field{min-width:0}.distance-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.distance-calc-btn{white-space:nowrap;padding:10px 12px}.route-status{display:block;margin-top:6px;color:#697a99;font-size:10.5px;line-height:1.4}.route-status .link-button,.link-button{border:0;background:transparent;color:#1748a5;text-decoration:underline;padding:0;font:inherit;cursor:pointer}.field-help{display:block;margin-top:5px;color:#7b879c;font-size:10px;line-height:1.35}
@media(max-width:640px){.distance-input-row{grid-template-columns:1fr}.distance-calc-btn{width:100%}.quote-paper-logo{width:170px!important;height:74px!important}}


/* =====================================================================
   V5.31 — Pre-Data Review Fixes
   ===================================================================== */
.mini-avatar-photo{width:44px;height:44px;border-radius:13px;object-fit:cover;object-position:center top;border:2px solid #fff;box-shadow:0 6px 14px rgba(18,61,145,.16);flex:0 0 auto}
.login-photo-editor{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;padding:12px;margin-bottom:12px;border:1px solid var(--line);border-radius:16px;background:#fbfcff}
.login-photo-preview,.login-photo-placeholder{width:92px;height:92px;border-radius:18px;border:1px solid #d9e3f6;background:#eef4ff;display:grid;place-items:center;overflow:hidden}
.login-photo-preview{object-fit:cover;object-position:center top}.login-photo-placeholder{font-size:30px}.login-photo-editor b{display:block;font-size:13px;color:var(--blue3)}.login-photo-editor small{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.searchable-field{position:relative}.searchable-field input[list]{background:#fff;padding-right:36px}.searchable-field:after{content:'⌕';position:absolute;right:14px;top:36px;color:#6680b5;pointer-events:none}
.time-24-input{font-variant-numeric:tabular-nums;letter-spacing:.04em}.time-24-input.invalid-time{border-color:#e34f4f!important;background:#fff5f5!important}
.report-doc-head{border-bottom:2px solid #1748a5!important}.report-doc-head img{object-fit:contain}
.quote-summary{position:sticky!important;top:112px;align-self:start;max-height:calc(100vh - 128px);overflow:auto}
.quote-footer-editor{margin-top:14px;border:1px solid #dce5f5;border-radius:14px;background:#fbfcff;overflow:hidden}
.quote-footer-editor summary{cursor:pointer;list-style:none;padding:12px 13px;font-size:12px;font-weight:800;color:#173b8f;background:#f2f6ff}.quote-footer-editor summary::-webkit-details-marker{display:none}.quote-footer-editor summary:after{content:'＋';float:right}.quote-footer-editor[open] summary:after{content:'−'}
.quote-footer-editor-body{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:12px}.quote-footer-editor-body .field label{font-size:10px}.quote-footer-editor-body input{padding:9px 10px;font-size:12px}
.quote-parts-locked{opacity:.72}.quote-parts-locked .panel-head{background:#f7f8fb}.quote-part-line.locked{filter:grayscale(.25)}.quote-part-line.locked input,.quote-part-line.locked select{cursor:not-allowed;background:#f1f3f7}.quote-parts-locked #quoteAddPartBtn{cursor:not-allowed;box-shadow:none!important;transform:none!important}
.case-manage-col,.case-manage-cell{min-width:142px;width:142px}.case-row-actions{display:flex;gap:8px;justify-content:flex-start;flex-wrap:nowrap}.case-row-actions .mini-btn{min-width:54px;padding:8px 10px;font-weight:700}
.role-auto-count.editable{display:grid;grid-template-columns:1fr;gap:4px;align-content:center}.role-user-count-input{width:100%;min-width:76px;border:1px solid #cbd9f2;border-radius:9px;padding:6px 8px;font-size:18px;font-weight:800;color:var(--blue3);background:#fff}.role-auto-count.editable span b{display:inline;font-size:10px;margin:0;color:#3e5f9c}
@media(max-width:1100px){.quote-summary{position:static!important;max-height:none}.quote-footer-editor-body{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.login-photo-editor{grid-template-columns:72px 1fr}.login-photo-preview,.login-photo-placeholder{width:72px;height:72px}.quote-footer-editor-body{grid-template-columns:1fr}.case-manage-col,.case-manage-cell{min-width:128px;width:128px}}

/* V5.32 TEST DATA badge */
.test-data-badge{display:inline-flex;align-items:center;white-space:nowrap;padding:8px 11px;border-radius:999px;background:#fff3e8;border:1px solid #ffc89d;color:#e86612;font-size:11px;font-weight:800;letter-spacing:.035em;box-shadow:0 6px 14px rgba(240,105,20,.10)}
@media(max-width:1180px){.test-data-badge{font-size:10px;padding:7px 9px}}


/* =====================================================================
   V6.0 — CRM & SALES MANAGEMENT
   ===================================================================== */
.crm-shell{overflow:visible}
.crm-page-head{gap:18px}
.crm-page-head .button-row{margin-left:auto}
.crm-tabs{display:flex;gap:7px;overflow:auto;padding:11px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fbfcff;scrollbar-width:thin}
.crm-tab{border:1px solid #dde5f3;background:#fff;color:#53617d;border-radius:12px;padding:9px 13px;font-size:12px;font-weight:750;white-space:nowrap;transition:.15s}
.crm-tab:hover{transform:translateY(-1px);border-color:#b7c9ee}
.crm-tab.active{background:linear-gradient(180deg,#1f61d8,#1744a8);color:#fff;border-color:#1744a8;box-shadow:0 8px 18px rgba(23,68,168,.18)}
.crm-tab-panel{display:none;padding:16px}.crm-tab-panel.active{display:block}
.crm-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.crm-kpi{display:flex;align-items:center;gap:12px;text-align:left;padding:15px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 8px 18px rgba(15,52,126,.05);transition:.16s}
.crm-kpi:hover{transform:translateY(-2px);box-shadow:0 14px 25px rgba(15,52,126,.09)}
.crm-kpi-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;font-size:21px;font-weight:800;box-shadow:0 8px 16px rgba(20,60,140,.15)}
.crm-kpi-icon.blue{background:linear-gradient(145deg,#4c82ee,#1748ad)}.crm-kpi-icon.orange{background:linear-gradient(145deg,#ff9c49,#ef6616)}.crm-kpi-icon.green{background:linear-gradient(145deg,#53ca84,#198b50)}.crm-kpi-icon.purple{background:linear-gradient(145deg,#8b72e8,#6544c4)}
.crm-kpi small{display:block;font-size:11px;color:var(--muted)}.crm-kpi b{display:block;font-size:27px;color:var(--blue3);line-height:1.05;margin-top:3px}.crm-kpi em{font-style:normal;font-size:10px;color:var(--muted)}
.crm-overview-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-bottom:16px}.crm-overview-grid.second{grid-template-columns:1fr 1fr}
.crm-inner-panel{box-shadow:none;border-color:#e3e9f4}
.crm-pipeline-chart{padding:14px;display:grid;gap:10px}
.crm-stage-bar{border:0;background:transparent;text-align:left;padding:0}.crm-stage-bar-head{display:flex;justify-content:space-between;gap:8px;align-items:center}.crm-stage-bar-head b{font-size:12px;color:var(--blue3)}.crm-stage-bar-head span{font-size:10px;color:var(--muted);background:#eef3fb;border-radius:999px;padding:3px 7px}.crm-stage-meter{height:10px;background:#edf2fa;border-radius:999px;overflow:hidden;margin:6px 0 4px}.crm-stage-meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ff9b4a,#ff6a19)}.crm-stage-bar small{font-size:10px;color:var(--muted)}
.crm-activity-list,.crm-hot-list,.crm-renewal-list{padding:10px;display:grid;gap:8px}
.crm-activity-mini{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;border:1px solid #e6ebf4;background:#fff;border-radius:13px;padding:10px;text-align:left}.crm-activity-mini>span:first-child{width:34px;height:34px;border-radius:11px;background:#eef4ff;display:grid;place-items:center}.crm-activity-mini b{display:block;font-size:11.5px;color:var(--blue3)}.crm-activity-mini small{display:block;margin-top:2px;font-size:9.5px;color:var(--muted)}.crm-activity-mini em{font-style:normal;font-size:9px;color:#60708d}.crm-activity-mini.overdue{border-color:#ffc9c9;background:#fff8f8}.crm-activity-mini.overdue em{color:#bf3232}
.crm-hot-item{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #e6ebf4;background:#fff;border-radius:13px;padding:11px 12px;text-align:left}.crm-hot-item b{display:block;font-size:12px;color:var(--blue3)}.crm-hot-item small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.crm-hot-item>div:last-child{text-align:right}.crm-hot-item strong{display:block;color:#ef6a1b;font-size:15px}.crm-hot-item span{font-size:9.5px;color:var(--muted)}
.crm-toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.crm-toolbar input{min-width:280px;flex:1}.crm-toolbar>div:first-child{margin-right:auto}.crm-toolbar>div:first-child b{display:block;color:var(--blue3);font-size:14px}.crm-toolbar>div:first-child small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.crm-source{display:inline-flex;padding:5px 8px;border-radius:999px;background:#eef4ff;color:#315aa6;font-size:10px;font-weight:700}
.crm-status{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:750;background:#eef1f5;color:#5f6c80}.crm-status.new,.crm-status.planned{background:#eaf2ff;color:#315da8}.crm-status.contacted{background:#fff0df;color:#9a5d16}.crm-status.qualified,.crm-status.done{background:#e7f7ed;color:#257241}.crm-status.converted{background:#e9f7f3;color:#167464}.crm-status.lost,.crm-status.overdue{background:#ffe7e7;color:#a53737}
.crm-pipeline-board{display:grid;grid-template-columns:repeat(9,minmax(240px,1fr));gap:12px;overflow-x:auto;padding-bottom:10px}
.crm-stage-column{background:#f7f9fd;border:1px solid #e1e7f2;border-radius:16px;min-height:360px;overflow:hidden}.crm-stage-column-head{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:12px;border-bottom:1px solid #e4e9f3;background:#fff}.crm-stage-column-head b{display:block;font-size:12px;color:var(--blue3)}.crm-stage-column-head small{font-size:9px;color:var(--muted)}.crm-stage-column-head strong{font-size:12px;color:#ef6b19}.crm-stage-cards{padding:9px;display:grid;gap:9px}.crm-stage-empty{padding:16px;text-align:center;color:#93a0b3;font-size:10px}
.crm-opp-card{border:1px solid #dfe6f3;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 5px 13px rgba(15,52,126,.04)}.crm-opp-main{display:block;width:100%;text-align:left;border:0;background:#fff;padding:11px}.crm-opp-main .crm-prob{float:right;background:#fff0e5;color:#e46916;border-radius:999px;padding:4px 7px;font-size:9px;font-weight:800}.crm-opp-main b{display:block;font-size:11.5px;color:var(--blue3);padding-right:36px}.crm-opp-main small{display:block;margin-top:4px;font-size:9.5px;color:var(--muted)}.crm-opp-main strong{display:block;margin-top:9px;font-size:17px;color:#ef6b19}.crm-opp-main em{display:block;margin-top:3px;font-size:9px;color:#7a879b;font-style:normal}.crm-opp-move{display:grid;grid-template-columns:28px 1fr 28px;gap:4px;align-items:center;background:#f7f9fd;border-top:1px solid #e7ebf3;padding:6px}.crm-opp-move button{width:28px;height:27px;border:1px solid #dce4f1;background:#fff;color:#315aa6;border-radius:8px;font-weight:800}.crm-opp-move button:disabled{opacity:.3}.crm-opp-move span{text-align:center;font-size:8.5px;color:#687792}
.crm-master-timeline{display:grid;gap:9px}.crm-timeline-row{display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:flex-start;border:1px solid #e3e8f2;background:#fff;border-radius:15px;padding:12px}.crm-timeline-row.overdue{border-left:4px solid #e45353}.crm-timeline-icon{width:42px;height:42px;border-radius:13px;background:#eef4ff;display:grid;place-items:center;font-size:18px}.crm-timeline-main>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.crm-timeline-main b{font-size:13px;color:var(--blue3)}.crm-timeline-main small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.crm-timeline-main p{font-size:10.5px;color:#53617a;margin:6px 0 0}.crm-timeline-actions{display:flex;gap:6px}
.crm-customer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.crm-customer-card{border:1px solid #e1e7f2;background:#fff;border-radius:17px;padding:13px;text-align:left;box-shadow:0 7px 16px rgba(15,52,126,.04);transition:.16s}.crm-customer-card:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(15,52,126,.08)}.crm-customer-card-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.crm-customer-card-head>div{display:flex;gap:9px;min-width:0}.crm-customer-card-head>div>span{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#4479e8,#1742a5);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:800;flex:0 0 auto}.crm-customer-card-head b{display:block;font-size:12px;color:var(--blue3)}.crm-customer-card-head small{display:block;font-size:9px;color:var(--muted);margin-top:3px}.crm-customer-card-head strong{font-size:10px;color:#ef6a1b;white-space:nowrap}.crm-customer-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}.crm-customer-stats span{padding:7px;background:#f7f9fd;border-radius:10px;text-align:center}.crm-customer-stats b{display:block;font-size:14px;color:var(--blue3)}.crm-customer-stats small{display:block;font-size:7.8px;color:var(--muted);margin-top:2px}
.crm-renewal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.crm-renewal-card{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;border:1px solid #e1e7f2;background:#fff;border-radius:15px;padding:11px}.crm-renewal-card.high{border-left:4px solid #ef5555}.crm-renewal-card.medium{border-left:4px solid #ff982f}.crm-renewal-card.low{border-left:4px solid #3f7de1}.crm-renewal-icon{width:42px;height:42px;border-radius:13px;background:#eef4ff;display:grid;place-items:center;font-size:18px}.crm-renewal-main b{display:block;font-size:11.5px;color:var(--blue3)}.crm-renewal-main small{display:block;font-size:9.5px;color:var(--muted);margin-top:3px}.crm-renewal-main em{display:block;font-style:normal;font-size:9px;color:#e56b1d;margin-top:4px}.crm-renewal-actions{display:flex;gap:6px}
.crm-opportunity-hero{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px;border:1px solid #e2e8f3;background:linear-gradient(135deg,#f8fbff,#fff9f5);border-radius:16px;margin-bottom:14px}.crm-opportunity-hero small{font-size:10px;color:#ef6c1a;font-weight:750}.crm-opportunity-hero h3{font-size:20px;color:var(--blue3);margin:3px 0}.crm-opportunity-hero p{font-size:11px;color:var(--muted);margin:0}.crm-opportunity-hero>div:last-child{text-align:right}.crm-opportunity-hero>div:last-child b{display:block;font-size:28px;color:#ef6b19}.crm-opportunity-hero>div:last-child span{font-size:10px;color:var(--muted)}
.crm-link-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.crm-link-actions button{border:1px solid #dce4f1;background:#fff;color:#214d9d;border-radius:11px;padding:8px 10px;font-size:10.5px;font-weight:750}.crm-link-actions button.orange{background:linear-gradient(180deg,#ff8a35,#f36a17);border-color:#ee6516;color:#fff;box-shadow:0 8px 17px rgba(240,104,24,.20)}
.crm-360-header{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px;border-radius:16px;background:linear-gradient(135deg,#f8fbff,#fff8f1);border:1px solid #e3e9f3}.crm-360-header h3{font-size:22px;color:var(--blue3);margin:0}.crm-360-header p{font-size:11px;color:#596982;margin:4px 0}.crm-360-header small{font-size:9.5px;color:var(--muted)}.crm-360-score{text-align:center;background:#fff;border:1px solid #e2e8f3;border-radius:13px;padding:10px 15px}.crm-360-score b{display:block;font-size:24px;color:#ef6b19}.crm-360-score span{font-size:8.5px;color:var(--muted)}.crm-360-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:12px 0}.crm-360-kpis button{border:1px solid #e1e7f2;background:#fff;border-radius:12px;padding:9px}.crm-360-kpis b{display:block;font-size:18px;color:var(--blue3)}.crm-360-kpis small{display:block;font-size:8.5px;color:var(--muted)}.crm-360-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.crm-360-columns h4{font-size:12px;color:var(--blue3);margin:0 0 7px}.crm-360-row{display:block;width:100%;border:1px solid #e7ebf3;background:#fff;border-radius:11px;padding:9px;text-align:left;margin-bottom:6px}.crm-360-row b{display:block;font-size:10.5px;color:#24478b}.crm-360-row small{display:block;font-size:8.5px;color:var(--muted);margin-top:3px}

@media(max-width:1250px){.crm-kpi-grid{grid-template-columns:repeat(2,1fr)}.crm-overview-grid,.crm-overview-grid.second{grid-template-columns:1fr}.crm-customer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.crm-tab-panel{padding:12px}.crm-renewal-grid{grid-template-columns:1fr}.crm-360-kpis{grid-template-columns:repeat(3,1fr)}.crm-360-columns{grid-template-columns:1fr}.crm-timeline-row{grid-template-columns:42px 1fr}.crm-timeline-actions{grid-column:2}}
@media(max-width:640px){.crm-page-head{align-items:flex-start}.crm-page-head .button-row{width:100%;margin:0}.crm-page-head .button-row>*{flex:1}.crm-tabs{margin:0 -1px;padding:8px}.crm-tab{padding:8px 10px;font-size:10px}.crm-kpi-grid{grid-template-columns:repeat(2,1fr);gap:8px}.crm-kpi{padding:11px;gap:8px;border-radius:15px}.crm-kpi-icon{width:38px;height:38px;border-radius:12px;font-size:17px}.crm-kpi b{font-size:20px}.crm-toolbar{align-items:stretch}.crm-toolbar input,.crm-toolbar select,.crm-toolbar button{width:100%;min-width:0}.crm-customer-grid{grid-template-columns:1fr}.crm-customer-stats{grid-template-columns:repeat(4,1fr)}.crm-renewal-card{grid-template-columns:38px 1fr}.crm-renewal-actions{grid-column:1/-1}.crm-360-header{align-items:flex-start}.crm-360-kpis{grid-template-columns:repeat(2,1fr)}.crm-pipeline-board{grid-template-columns:repeat(9,220px)}}