@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f4f7fc;--surface:#fff;--text:#17233d;--muted:#71809b;--line:#e6ebf3;--primary:#3568e8;--primary2:#244fc1;--soft:#edf2ff;--shadow:0 18px 55px rgba(31,53,94,.09);--green:#0c9b76;--red:#df5264}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px}body,button,input,select,textarea{font-family:'DM Sans',sans-serif}a{color:var(--primary);text-decoration:none}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}h1,h2,h3{font-family:Manrope,sans-serif;letter-spacing:-.035em}p{line-height:1.7}.muted,small{color:var(--muted)}.topnav{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(calc((100% - 1160px)/2),5%);background:var(--surface);border-bottom:1px solid var(--line)}.topnav>div{display:flex;gap:10px;align-items:center}.brand{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:600;font-size:16px}.brand b{font-weight:800}.brand-mark{width:42px;height:42px;display:inline-grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#3978f4,#193c9c);color:white;font-weight:800;font-size:21px;box-shadow:0 8px 18px #3568e83b}.brand-mark.sm{width:34px;height:34px;border-radius:11px;font-size:17px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:11px 16px;font-weight:700;font-size:13px;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--primary);color:#fff;box-shadow:0 7px 18px #3568e82c}.btn.primary:hover{background:var(--primary2)}.btn.ghost{background:transparent;color:var(--text)}.btn.soft{background:var(--soft);color:var(--primary)}.btn.large{padding:14px 20px}.btn.small{padding:8px 11px;font-size:12px}.btn.full{width:100%;margin-top:20px}.icon-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);width:38px;height:38px;border-radius:10px;font-size:17px}.wrap{max-width:1160px;margin:auto}.hero{min-height:600px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding:65px 20px}.eyebrow{display:inline-block;color:var(--primary);font-size:10px;letter-spacing:.16em;font-weight:800;margin-bottom:15px}.hero h1{font-size:clamp(42px,5vw,62px);line-height:1.12;margin:0 0 22px}.hero h1 span{color:var(--primary)}.hero-copy>p{font-size:16px;color:var(--muted);max-width:520px}.hero-actions{display:flex;gap:12px;margin:28px 0}.trust-row{display:flex;flex-wrap:wrap;gap:18px;color:var(--muted);font-size:12px}.hero-visual{height:430px;display:grid;place-items:center;position:relative}.orb{position:absolute;width:390px;height:390px;border-radius:50%;background:radial-gradient(circle,#dbe6ff 0,#eaf0ff 50%,transparent 70%)}.mock-window{z-index:1;width:min(430px,100%);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow);transform:rotate(2deg)}.mock-head{display:flex;gap:5px;align-items:center;color:var(--muted);font-size:12px}.mock-head i{width:7px;height:7px;border-radius:50%;background:#d8deea}.mock-head span{margin-left:12px}.mock-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}.mock-stat div{background:var(--bg);border-radius:12px;padding:13px}.mock-stat small,.mock-stat b{display:block}.mock-stat small{font-size:9px;letter-spacing:.1em}.mock-stat b{font-size:24px;margin-top:6px}.mock-line{display:flex;align-items:center;gap:9px;padding:12px 0;border-top:1px solid var(--line);font-size:11px}.mock-line span{width:7px;height:7px;border-radius:50%;background:#f3b644}.mock-line:nth-of-type(4) span{background:#3978f4}.mock-line:nth-of-type(5) span{background:#10a77c}.mock-line b{flex:1}.mock-line small{font-size:9px}.mock-chart{height:75px;display:flex;align-items:end;gap:13px;padding:10px 30px 0}.mock-chart span{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(#8db1ff,#dbe6ff)}.float-note{position:absolute;z-index:2;right:-5px;bottom:32px;background:var(--surface);padding:14px 18px;border-radius:13px;box-shadow:var(--shadow);line-height:1.8}.section{padding:60px 20px}.section-heading{text-align:center;max-width:650px;margin:0 auto 36px}.section-heading h2,.bottom-cta h2{font-size:34px;margin:4px 0 10px}.section-heading p{color:var(--muted)}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.steps article{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px}.steps article>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--soft);color:var(--primary);font-weight:800}.steps h3{font-size:16px;margin:20px 0 8px}.steps p{font-size:13px;color:var(--muted);margin:0}.bottom-cta{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px;margin-bottom:55px}.bottom-cta h2{font-size:25px}.bottom-cta p{color:var(--muted);margin:0}footer{text-align:center;padding:25px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
.auth-bg{min-height:100vh;background:radial-gradient(circle at 12% 12%,#e6edff 0,transparent 35%),var(--bg);display:grid;place-items:center;padding:30px 16px}.auth-card,.form-card,.track-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:var(--shadow)}.auth-card.wide{width:min(620px,100%)}.auth-brand{margin-bottom:25px}.auth-card h1,.form-card h1,.track-card h1{font-size:27px;margin:10px 0}.auth-card form,.form-card form{margin-top:22px}.auth-card label,.form-card label,.account-section label,.detail-update label{display:block;font-weight:700;font-size:12px;margin:14px 0 7px}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);padding:12px 13px;outline:none;font-size:13px}input:focus,select:focus,textarea:focus{border-color:#7da0f7;box-shadow:0 0 0 3px #3568e815}textarea{resize:vertical;line-height:1.6}.password-wrap{position:relative}.password-wrap input{padding-right:70px}.show-pass{position:absolute;right:8px;top:7px;border:0;background:var(--soft);color:var(--primary);padding:6px 9px;border-radius:7px;font-size:11px}.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:20px;font-size:12px}.back-home{position:fixed;top:24px;left:25px;font-weight:700}.alert{padding:12px 14px;border-radius:10px;margin:15px 0;font-size:12px}.alert.success{background:#e8f8f1;color:#087b58}.alert.error{background:#fff0f1;color:#b52e43}.alert.warning{background:#fff7e5;color:#93610c}.strength{height:7px;background:var(--line);border-radius:20px;overflow:hidden;margin:12px 0 6px}.strength>div{height:100%;width:0;transition:width .3s,background .3s;background:#df5264}.strength>div.medium{background:#e6a23c}.strength>div.strong{background:#0caa7a}.form-card{width:min(600px,100%)}.form-card .brand,.track-card .brand{margin-bottom:26px}.form-card .privacy-note{font-size:11px;color:var(--muted);text-align:center;margin-top:18px}.track-card{width:min(720px,100%)}.status{display:inline-block;padding:5px 9px;border-radius:7px;font-size:10px;font-weight:800;background:#fff5dd;color:#a66a00}.status.in_progress{background:#e9f0ff;color:#275bc8}.status.resolved{background:#e4f8ef;color:#087b58}.status.closed{background:#edf0f5;color:#596579}.timeline{border-top:1px solid var(--line);margin-top:24px;padding-top:15px}.timeline-item{border-left:2px solid #b9cbfb;padding:0 0 12px 14px;margin:12px 0}.timeline-item small{display:block;margin-top:4px}.timeline-item p{margin:5px 0;font-size:12px}.app-body{background:var(--bg)}.sidebar{position:fixed;inset:0 auto 0 0;width:245px;background:#111e3b;color:#dbe5ff;padding:24px 16px;display:flex;flex-direction:column;z-index:10;transition:transform .25s}.side-brand{color:white;padding:0 8px}.side-user{display:flex;align-items:center;gap:11px;padding:25px 8px;border-bottom:1px solid #ffffff18;margin-bottom:20px}.side-user b,.side-user small{display:block}.side-user b{font-size:12px;color:white}.side-user small{font-size:10px;color:#9eafd4;margin-top:4px}.avatar{width:36px;height:36px;display:grid;place-items:center;background:#2d4d91;border-radius:12px;color:white;font-weight:800}.sidebar nav,.side-bottom{display:grid;gap:6px}.sidebar nav a,.side-bottom a{color:#aab9d9;padding:12px;border-radius:9px;font-size:13px;display:flex;gap:12px;align-items:center}.sidebar nav a.active,.sidebar nav a:hover,.side-bottom a:hover{background:#263d6b;color:white}.side-bottom{margin-top:auto;border-top:1px solid #ffffff18;padding-top:15px}.main-area{margin-left:245px;transition:margin .25s}.sidebar-hidden .sidebar{transform:translateX(-100%)}.sidebar-hidden .main-area{margin-left:0}.app-header{height:82px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 30px;gap:15px;position:sticky;top:0;z-index:5}.app-header small{font-size:9px;letter-spacing:.12em}.app-header h1{font-size:20px;margin:3px 0}.header-actions{margin-left:auto;display:flex;align-items:center;gap:14px}.header-name{font-size:12px;font-weight:700}.content{max-width:1400px;padding:28px;margin:auto}.welcome-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.welcome-row h2{font-size:22px;margin:0}.welcome-row p{margin:5px 0}.date-chip{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px 13px;font-size:11px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:19px}.stat-card small,.stat-card b,.stat-card span{display:block}.stat-card small{font-size:9px;letter-spacing:.12em;font-weight:800}.stat-card b{font-size:30px;font-family:Manrope;margin:8px 0 4px}.stat-card span{font-size:11px;color:var(--muted)}.dashboard-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin:18px 0}.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;min-width:0}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.panel-title h3{font-size:15px;margin:0 0 4px}.panel-title small{font-size:11px}.chart-panel canvas{max-height:220px}.recent-list{display:grid;gap:16px}.recent-item{display:flex;gap:12px;align-items:flex-start}.recent-dot{width:8px;height:8px;background:#10a77c;border-radius:50%;margin-top:5px;flex-shrink:0}.recent-item b,.recent-item small{display:block}.recent-item b{font-size:11px}.recent-item small{font-size:10px;margin-top:4px}.section-panel{margin-top:18px}.filter-row{display:grid;grid-template-columns:minmax(200px,1fr) 150px 145px 145px;gap:9px;margin-bottom:15px}.filter-row input,.filter-row select{padding:10px;font-size:12px}.export-actions{display:flex;gap:7px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:760px}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);font-size:11px;white-space:nowrap}th{color:var(--muted);font-size:10px;background:var(--bg)}td b{color:var(--primary)}.sort-btn{border:0;background:none;color:inherit;font-size:10px;font-weight:800;padding:0}.pagination{display:flex;justify-content:center;align-items:center;gap:22px;padding:17px 0 2px;color:var(--muted);font-size:11px}.pagination div{display:flex;align-items:center;gap:12px}.pagination button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:7px;width:28px;height:28px}.pagination button:disabled{opacity:.3}.empty{text-align:center;color:var(--muted);padding:28px}.loading-area{min-height:75px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:12px}.loader{width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.link-list{display:grid;gap:9px}.link-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px}.link-row b,.link-row small{display:block}.link-row b{font-size:12px}.link-row small{font-size:10px;margin:4px 0;overflow-wrap:anywhere}.link-row>div:last-child{display:flex;gap:6px;flex-wrap:wrap}.detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;text-align:left;font-size:12px}.detail-grid p{line-height:1.6}.detail-update{background:var(--bg);padding:13px;border-radius:10px}.photo-grid{display:flex;gap:8px;flex-wrap:wrap}.ticket-photo{width:85px;height:75px;object-fit:cover;border-radius:8px;cursor:zoom-in}.account-section{border-top:1px solid var(--line);padding:16px 0;margin:12px 0}.account-section h3{font-size:15px}.account-section form{max-width:400px}.account-section button{margin-top:14px}
:root[data-theme=dark]{--bg:#0d1528;--surface:#15213a;--text:#e9efff;--muted:#9aa9c5;--line:#293754;--soft:#1f3156;--shadow:0 18px 55px rgba(0,0,0,.25)}:root[data-theme=dark] .auth-bg{background:radial-gradient(circle at 12% 12%,#1c2e54 0,transparent 35%),var(--bg)}:root[data-theme=dark] .steps article,:root[data-theme=dark] .mock-stat div,:root[data-theme=dark] th{background:#1c2b48}:root[data-theme=dark] .mock-window{background:#15213a}:root[data-theme=dark] .orb{background:radial-gradient(circle,#1d3159 0,#15213a 50%,transparent 70%)}
@media(max-width:1000px){.hero{gap:20px}.hero h1{font-size:46px}.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.topnav{padding:0 15px;height:65px}.topnav .btn.ghost{display:none}.hero{grid-template-columns:1fr;padding:50px 22px 20px;gap:0}.hero h1{font-size:43px}.hero-visual{height:360px}.mock-window{max-width:390px}.float-note{right:0}.section{padding:45px 20px}.section-heading h2{font-size:28px}.bottom-cta{margin:0 15px 35px;display:block}.bottom-cta .btn{margin-top:18px}.steps{grid-template-columns:1fr 1fr}.sidebar{width:260px}.main-area{margin-left:0}.sidebar{transform:translateX(-100%)}body:not(.sidebar-hidden) .sidebar{transform:translateX(-100%)}.sidebar-hidden .sidebar{transform:translateX(0)}.sidebar-hidden .main-area{margin-left:0}.app-header{height:70px;padding:0 15px}.content{padding:18px 13px}.welcome-row{align-items:flex-start;gap:10px}.welcome-row h2{font-size:18px}.date-chip{font-size:9px}.stats-grid{gap:9px}.stat-card{padding:14px}.stat-card b{font-size:25px}.filter-row{grid-template-columns:1fr 1fr}.filter-row input:first-child{grid-column:1/-1}.panel{padding:14px}.panel-title{align-items:flex-start;flex-wrap:wrap}.link-row{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.header-name{display:none}.auth-card,.form-card,.track-card{padding:24px 20px}.back-home{position:static;margin-bottom:15px}.auth-bg{display:flex;flex-direction:column;justify-content:center}.auth-links{flex-wrap:wrap}}@media(max-width:430px){.steps{grid-template-columns:1fr}.hero h1{font-size:38px}.hero-actions{flex-direction:column;align-items:stretch}.trust-row{gap:9px}.hero-visual{height:315px}.mock-window{padding:14px}.mock-stat b{font-size:20px}.float-note{font-size:11px;right:-2px;bottom:0}.stats-grid{grid-template-columns:1fr 1fr}.stat-card span{font-size:10px}.export-actions{width:100%}}
/* Media management table responsive */
.table-wrap{width:100%;overflow-x:auto}.table-wrap table{width:100%;border-collapse:collapse}.table-wrap th,.table-wrap td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}.table-wrap th{color:var(--muted);font-size:11px}


/* YOS IT SUPPORT — responsive ticket detail and photo gallery */
.yos-detail-swal{width:min(960px,96vw)!important;max-width:96vw!important;padding:clamp(14px,2.2vw,24px)!important;border-radius:18px!important}
.yos-detail-swal .swal2-title{font-size:clamp(20px,3vw,27px)!important}
.yos-detail-swal-body{margin:0!important;padding:0!important;overflow:visible!important}
.yos-ticket-detail{text-align:left;color:var(--text,#17233d);font-size:13px}
.yos-ticket-summary{padding:4px 2px 14px;border-bottom:1px solid var(--line,#e4eaf3);margin-bottom:16px;overflow-wrap:anywhere}
.yos-ticket-summary>b{font-size:14px}.yos-ticket-summary p{margin:7px 0;line-height:1.6}
.yos-detail-columns{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,1fr);gap:18px;align-items:start}
.yos-section-label{display:flex;justify-content:space-between;gap:10px;align-items:center;font-weight:700;margin:0 0 10px}
.yos-section-label span{font-weight:500;color:var(--muted,#73819b)}
.yos-photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:10px;margin-bottom:16px}
.yos-photo-thumb{appearance:none;border:1px solid var(--line,#dce4f0);background:var(--surface,#fff);border-radius:11px;padding:5px;display:flex;flex-direction:column;gap:5px;min-width:0;cursor:zoom-in;color:inherit;position:relative;z-index:1;pointer-events:auto;touch-action:manipulation}
.yos-photo-thumb:hover,.yos-photo-thumb:focus-visible{border-color:#4778df;box-shadow:0 0 0 3px rgba(71,120,223,.15);outline:0}
.yos-photo-thumb img{display:block;width:100%;height:100px;object-fit:cover;border-radius:7px;pointer-events:none;background:#eef2f8}
.yos-photo-thumb span{font-size:11px;text-align:center;color:var(--muted,#73819b)}
.yos-no-photo{color:var(--muted,#73819b);padding:12px 0}
.yos-detail-update{background:var(--bg,#f4f7fc);border:1px solid var(--line,#e3e9f2);border-radius:13px;padding:14px;position:relative;z-index:0}
.yos-detail-update label{display:block;font-weight:700;margin:0 0 7px}
.yos-detail-update select,.yos-detail-update textarea{width:100%;box-sizing:border-box;margin:0 0 14px;padding:11px;border:1px solid var(--line,#dce4f0);border-radius:9px;background:var(--surface,#fff);color:var(--text,#17233d);font:inherit}
.yos-detail-update textarea{resize:vertical;min-height:110px}
.yos-photo-lightbox{position:fixed;inset:0;z-index:200000;background:rgba(8,14,29,.94);display:flex;align-items:center;justify-content:center;padding:65px 76px 45px;box-sizing:border-box;overscroll-behavior:contain}
.yos-lightbox-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:auto;touch-action:pan-x pan-y}
.yos-lightbox-image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:center;transition:transform .12s ease;user-select:none;-webkit-user-drag:none}
.yos-photo-lightbox button{font:inherit;cursor:pointer;border:1px solid rgba(255,255,255,.2);color:#fff;background:rgba(255,255,255,.13);border-radius:10px;min-width:40px;min-height:40px}
.yos-photo-lightbox button:hover{background:rgba(255,255,255,.25)}
.yos-photo-lightbox button:disabled{opacity:.35;cursor:not-allowed}
.yos-lightbox-close{position:absolute;right:18px;top:18px;font-size:28px!important}
.yos-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:28px!important}
.yos-lightbox-prev{left:16px}.yos-lightbox-next{right:16px}
.yos-lightbox-tools{position:absolute;top:15px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:rgba(15,23,42,.7);padding:6px 9px;border-radius:13px;color:#fff;white-space:nowrap}
.yos-lightbox-tools button{min-width:34px;min-height:32px}
.yos-lightbox-count{font-size:12px;padding:0 5px}
body.yos-lightbox-open{overflow:hidden}
@media(max-width:700px){
 .yos-detail-swal{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;padding:16px 12px!important;margin:8px!important;box-sizing:border-box}
 .yos-detail-swal .swal2-actions{margin-top:12px!important;flex-wrap:wrap}
 .yos-detail-swal .swal2-styled{margin:4px!important;padding:10px 13px!important;font-size:13px!important}
 .yos-detail-columns{grid-template-columns:minmax(0,1fr);gap:12px}
 .yos-photo-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .yos-photo-thumb img{height:clamp(78px,22vw,120px)}
 .yos-detail-update{padding:12px}
 .yos-photo-lightbox{padding:70px 12px 30px}
 .yos-lightbox-nav{top:auto;bottom:12px;transform:none}
 .yos-lightbox-prev{left:calc(50% - 52px)}.yos-lightbox-next{right:calc(50% - 52px)}
 .yos-lightbox-close{right:10px;top:10px}
 .yos-lightbox-tools{top:10px;left:10px;transform:none;gap:5px;padding:5px}
 .yos-lightbox-tools button{min-width:30px;min-height:30px}
 .yos-lightbox-count{font-size:11px}
}