/* GiGaMock — restrained reskin inspired by GIGA layout. Original copy not reused. */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color:#2a2a2a;background:#f5f6f8;font-size:13px;line-height:1.45}
a{color:#0066c0;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1400px;margin:0 auto;padding:0 20px}
.muted{color:#888}
.small{font-size:11px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.pos{color:#0a8a0a}
.neg{color:#c0392b}
code{background:#f0f0f0;padding:1px 4px;border-radius:3px;font-size:11px}

/* top bar */
.top-bar{background:#222;color:#bbb;font-size:11px}
.top-bar-inner{display:flex;justify-content:space-between;padding:6px 20px}
.top-bar a.top-link{color:#ddd;margin-right:14px}
.top-bar-right .top-link{margin-left:14px;margin-right:0}
.top-greeting{margin-right:18px}

/* header */
.site-header{background:#fff;border-bottom:1px solid #e3e3e3}
.header-inner{display:flex;align-items:center;gap:32px;padding:14px 20px}
.logo{display:flex;align-items:center;gap:6px}
.logo img{height:36px}
.logo-text{font-size:22px;font-weight:700;color:#ff6600;letter-spacing:-.5px}
.search-box{flex:1;display:flex;border:2px solid #ff6600;border-radius:4px;overflow:hidden;max-width:640px}
.search-box input{flex:1;border:0;padding:8px 12px;font-size:13px;outline:none}
.btn-search{background:#ff6600;color:#fff;border:0;padding:0 18px;font-weight:600;cursor:pointer}
.header-right{display:flex;align-items:center;gap:18px}
.icon-link{color:#444;display:flex;align-items:center;gap:4px}
.icon-link .ic{display:inline-block;width:18px;height:18px;background:#ff6600;color:#fff;border-radius:50%;text-align:center;line-height:18px;font-weight:700;font-size:11px}
.balance-pill{background:#fff7ee;color:#ff6600;border:1px solid #ffd9b3;padding:2px 8px;border-radius:10px;font-weight:600}

/* main nav */
.main-nav{background:#fff;border-bottom:1px solid #e3e3e3}
.main-nav .container{display:flex;gap:0}
.main-nav a{display:inline-block;padding:10px 16px;color:#333;font-weight:500}
.main-nav a:hover{background:#fff7ee;color:#ff6600;text-decoration:none}

/* breadcrumb */
.breadcrumb-bar{background:#fafafa;border-bottom:1px solid #ececec;padding:6px 0;font-size:12px;color:#666}
.breadcrumb-bar a{color:#666}
.breadcrumb-bar .sep{margin:0 6px;color:#bbb}

/* page */
.page-wrap{min-height:calc(100vh - 240px)}
main.container{padding-top:18px;padding-bottom:48px}
.page-title{font-size:20px;font-weight:600;margin:6px 0 16px}
.page-head{display:flex;justify-content:space-between;align-items:center}
.head-actions{display:flex;gap:10px;align-items:center}

/* tabs */
.tabs{display:flex;border-bottom:2px solid #e3e3e3;margin-bottom:14px}
.tabs .tab{padding:9px 18px;color:#555;border-bottom:2px solid transparent;margin-bottom:-2px}
.tabs .tab.active{color:#ff6600;border-bottom-color:#ff6600;font-weight:600}
.sub-tabs{display:flex;gap:18px;padding:8px 0;border-bottom:1px solid #eee;margin-bottom:12px;font-size:12px}
.sub-tab{color:#666;padding:4px 2px}
.sub-tab.active{color:#ff6600;border-bottom:2px solid #ff6600;font-weight:600;padding-bottom:2px}

/* filter bar */
.filter-bar{background:#fff;padding:12px 14px;border:1px solid #ececec;border-radius:4px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.filter-bar input,.filter-bar select{border:1px solid #ddd;padding:6px 10px;border-radius:3px;font-size:12px;background:#fff}
.filter-bar input:focus,.filter-bar select:focus{outline:none;border-color:#ff6600}
.filter-bar label{display:inline-flex;gap:6px;align-items:center;color:#555;font-size:12px}
.filter-bar .summary{margin-left:auto;display:flex;gap:18px;color:#555}

.chip{padding:4px 10px;border:1px solid #ddd;border-radius:14px;font-size:11px;color:#555;background:#fff}
.chip.on{background:#fff7ee;color:#ff6600;border-color:#ffb380}

/* buttons */
.btn{display:inline-block;padding:6px 14px;border:1px solid #ccc;background:#fff;color:#333;border-radius:3px;cursor:pointer;font-size:12px;text-decoration:none}
.btn:hover{background:#f5f5f5;text-decoration:none}
.btn-primary{background:#ff6600;color:#fff;border-color:#ff6600}
.btn-primary:hover{background:#e55a00;color:#fff}
.btn-sm{padding:3px 9px;font-size:11px}
.btn-link{background:none;border:none;color:#0066c0;padding:6px 8px}
.btn-link:hover{text-decoration:underline;background:none}

/* tables */
.data-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #ececec;font-size:12px}
.data-table th{background:#fafafa;text-align:left;padding:9px 10px;font-weight:600;color:#555;border-bottom:1px solid #ececec;white-space:nowrap}
.data-table td{padding:9px 10px;border-bottom:1px solid #f3f3f3;vertical-align:top}
.data-table tr:hover td{background:#fafcff}
.data-table th.num,.data-table td.num{text-align:right}
.data-table td .item-line{margin-bottom:2px}
.data-table .empty{text-align:center;color:#999;padding:32px;font-size:12px}
.data-table .actions{white-space:nowrap}
.data-table .actions .btn{margin-right:4px}

/* badges */
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;background:#eee;color:#555}
.badge-completed{background:#e3f6e3;color:#1b7a1b}
.badge-unpaid{background:#fff3e0;color:#cc6f00}
.badge-canceled{background:#fbe6e6;color:#a53030}
.badge-topup{background:#e6f0fb;color:#1f5a96}
.badge-purchase{background:#fbe6e6;color:#a53030}
.badge-fee{background:#f4eaff;color:#6a3aa0}
.badge-manual{background:#e6f0fb;color:#1f5a96}
.badge-refund{background:#e3f6e3;color:#1b7a1b}

/* balance cards */
.balance-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 18px}
.balance-card{background:#fff;border:1px solid #ececec;border-radius:4px;padding:16px 18px}
.bc-label{color:#888;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.bc-value{font-size:26px;font-weight:600;color:#222;margin:4px 0}
.bc-value.neg{color:#c0392b}
.bc-sub{font-size:11px;color:#666}

/* profile */
.profile-card{background:#fff;border:1px solid #ececec;border-radius:4px;padding:18px 24px;max-width:760px}
.profile-row{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid #f3f3f3;gap:18px}
.profile-row label{width:140px;color:#888;font-size:12px}
.profile-row span{flex:1}

/* dialog */
dialog{border:1px solid #ddd;border-radius:6px;padding:0;background:transparent}
dialog form{background:#fff;padding:22px 26px;min-width:360px}
dialog h3{margin:0 0 14px}
.form-stack{display:flex;flex-direction:column;gap:10px}
.form-stack label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#555}
.form-stack input,.form-stack select{border:1px solid #ddd;padding:7px 9px;border-radius:3px;font-size:13px}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.dlg-actions button{padding:6px 14px;border:1px solid #ccc;background:#fff;border-radius:3px;cursor:pointer}
.dlg-actions .btn-primary{background:#ff6600;color:#fff;border-color:#ff6600}

/* pager */
.pager{margin-top:12px;display:flex;gap:12px;align-items:center;font-size:12px}
.pager a{color:#0066c0}

/* empty panel */
.empty-panel{background:#fff;border:1px solid #ececec;border-radius:4px;padding:60px;text-align:center;color:#888}

/* auth */
.auth-card{max-width:420px;margin:60px auto;background:#fff;border:1px solid #ececec;border-radius:6px;padding:30px 34px}

/* footer */
.site-footer{background:#222;color:#bbb;padding:30px 0 14px;margin-top:30px;font-size:12px}
.footer-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0 20px}
.footer-title{font-weight:600;color:#fff;margin-bottom:8px}
.footer-col a{display:block;color:#bbb;line-height:1.9}
.footer-col a:hover{color:#fff;text-decoration:none}
.copyright{text-align:center;border-top:1px solid #333;margin-top:24px;padding-top:14px;color:#777;font-size:11px}
.copyright a{color:#999}

/* card */
.card{background:#fff;border:1px solid #ececec;border-radius:4px;padding:16px 20px;margin-bottom:16px}
.card-title{font-size:14px;font-weight:600;margin:0 0 12px;padding-left:8px;border-left:3px solid #ff6600;color:#333}

/* status banner */
.status-banner{display:flex;gap:30px;align-items:center;padding:14px 18px;border-radius:4px;margin-bottom:14px;background:#fff;border:1px solid #ececec}
.status-banner.status-completed{background:#eff8ef;border-color:#cbe5cb}
.status-banner.status-unpaid{background:#fff7e6;border-color:#ffd9a3}
.status-banner.status-canceled{background:#fbeded;border-color:#f0c2c2}

/* order summary */
.order-summary{margin-top:14px;margin-left:auto;width:340px}
.summary-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed #eee}
.summary-row.total{font-size:15px;font-weight:600;color:#ff6600;border-bottom:none}

/* timeline */
.timeline{list-style:none;padding:0;margin:0;border-left:2px solid #eee;padding-left:16px}
.timeline li{position:relative;padding:6px 0 14px}
.timeline li::before{content:"";position:absolute;left:-22px;top:10px;width:8px;height:8px;border-radius:50%;background:#ff6600}
.tl-title{font-weight:600;color:#333;font-size:13px}
.tl-detail{color:#555;font-size:12px;margin:2px 0}

/* dashboard grid */
.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.dash-card{background:#fff;border:1px solid #ececec;border-radius:4px;padding:18px 20px}
.dc-title{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.dc-value{font-size:18px;font-weight:600;color:#222;margin-bottom:8px}
.dc-value.neg{color:#c0392b}

/* chat shell */
.chat-shell{display:grid;grid-template-columns:240px 1fr;gap:0;background:#fff;border:1px solid #ececec;border-radius:4px;min-height:420px}
.chat-side{border-right:1px solid #ececec;padding:8px}
.chat-nav{padding:10px 12px;color:#555;border-radius:4px;font-size:13px;cursor:pointer}
.chat-nav:hover{background:#f5f5f5}
.chat-nav.active{background:#fff7ee;color:#ff6600;font-weight:600}
.chat-empty{display:flex;align-items:center;justify-content:center;color:#aaa}

/* RMA wizard */
.rma-wizard{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;background:#fff;border:1px solid #ececec;border-radius:4px;margin-bottom:14px}
.wizard-step{padding:6px 14px;border-radius:14px;background:#eee;color:#999;font-size:12px}
.wizard-step.active{background:#ff6600;color:#fff}
.wizard-sep{color:#ccc;letter-spacing:1px}

/* toast */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 18px;border-radius:4px;z-index:9999;animation:fadein .2s}
@keyframes fadein{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}