/* TOPINEXUS V11 — unified responsive + theme layer */
:root{
  --tn-bg:#f6f3fb;--tn-surface:#ffffff;--tn-surface-2:#f1ecf8;--tn-border:#d9d0e6;
  --tn-text:#211a2d;--tn-muted:#6f667b;--tn-faint:#8e8599;--tn-accent:#7c3aed;--tn-accent-2:#a855f7;
  --tn-shadow:0 12px 34px rgba(39,20,67,.09);--tn-focus:0 0 0 3px rgba(124,58,237,.16);
}
html[data-theme="dark"]{
  --tn-bg:#0c0812;--tn-surface:#181126;--tn-surface-2:#211936;--tn-border:#3b2d53;
  --tn-text:#f7f2ff;--tn-muted:#b6a9ca;--tn-faint:#817494;--tn-accent:#a970ff;--tn-accent-2:#c084fc;
  --tn-shadow:0 16px 42px rgba(0,0,0,.34);--tn-focus:0 0 0 3px rgba(169,112,255,.18);
}
html{background:var(--tn-bg);color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--tn-bg);color:var(--tn-text)}

/* Do not globally recolor every span: preserve semantic/accent/overlay colors. */
html[data-theme="light"] .panel,html[data-theme="light"] .card,html[data-theme="light"] .box,
html[data-theme="light"] .modal,html[data-theme="light"] .sheet,html[data-theme="light"] .ticket-card,
html[data-theme="light"] .order-card,html[data-theme="light"] .product-card,html[data-theme="light"] .stat-card,
html[data-theme="light"] .gate-card{background:var(--tn-surface);color:var(--tn-text);border-color:var(--tn-border)}
html[data-theme="dark"] .panel,html[data-theme="dark"] .card,html[data-theme="dark"] .box,
html[data-theme="dark"] .modal,html[data-theme="dark"] .sheet,html[data-theme="dark"] .ticket-card,
html[data-theme="dark"] .order-card,html[data-theme="dark"] .product-card,html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .gate-card{background:var(--tn-surface);color:var(--tn-text);border-color:var(--tn-border)}

/* Form controls: one predictable appearance in both themes. */
input:not([type="color"]),textarea,select,[contenteditable="true"]{
  box-sizing:border-box!important;max-width:100%;min-width:0;
}
html[data-theme="light"] input:not([type="color"]),html[data-theme="light"] textarea,html[data-theme="light"] select,html[data-theme="light"] [contenteditable="true"]{
  background:#fff!important;color:#211a2d!important;-webkit-text-fill-color:#211a2d!important;
  border-color:#cfc5dc!important;caret-color:#211a2d!important;
}
html[data-theme="dark"] input:not([type="color"]),html[data-theme="dark"] textarea,html[data-theme="dark"] select,html[data-theme="dark"] [contenteditable="true"]{
  background:#120c1d!important;color:#f7f2ff!important;-webkit-text-fill-color:#f7f2ff!important;
  border-color:#3b2d53!important;caret-color:#f7f2ff!important;
}
html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder{color:#756b82!important;-webkit-text-fill-color:#756b82!important;opacity:1!important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#a99db8!important;-webkit-text-fill-color:#a99db8!important;opacity:1!important}
html[data-theme="light"] option{background:#fff!important;color:#211a2d!important}
html[data-theme="dark"] option{background:#120c1d!important;color:#f7f2ff!important}

/* Readability for normal text only; image overlays remain intentionally white. */
html[data-theme="light"] .panel:not(.image-overlay) h1,html[data-theme="light"] .panel:not(.image-overlay) h2,
html[data-theme="light"] .panel:not(.image-overlay) h3,html[data-theme="light"] .panel:not(.image-overlay) h4,
html[data-theme="light"] .panel:not(.image-overlay) p,html[data-theme="light"] .panel:not(.image-overlay) label,
html[data-theme="light"] .panel:not(.image-overlay) td,html[data-theme="light"] .panel:not(.image-overlay) th,
html[data-theme="light"] .card-name,html[data-theme="light"] .card-price{color:var(--tn-text)!important}
html[data-theme="light"] .muted,html[data-theme="light"] .text-muted,html[data-theme="light"] .text-dim,
html[data-theme="light"] .text-faint,html[data-theme="light"] small{color:var(--tn-muted)!important}

/* Buttons never let content escape the border. */
button,.btn,.link-btn,.notice-btn,.theme-toggle,.icon-btn,.tab-btn,.nav-item{
  box-sizing:border-box!important;min-width:0;max-width:100%;
}
button,.btn,.link-btn,.notice-btn,.tab-btn{
  overflow-wrap:anywhere;word-break:normal;line-height:1.25;white-space:normal;
}
.btn{min-height:40px;height:auto!important;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 14px!important}
.btn>*,button>*,.theme-toggle>*{min-width:0;max-width:100%}
.btn.primary,.btn-accent{background:var(--tn-accent);border-color:var(--tn-accent);color:#fff!important;-webkit-text-fill-color:#fff!important}
html[data-theme="light"] .btn.secondary,html[data-theme="light"] .btn.ghost,html[data-theme="light"] .icon-btn,html[data-theme="light"] .theme-toggle{
  background:#f1ecf8!important;color:#211a2d!important;-webkit-text-fill-color:#211a2d!important;border-color:#cfc5dc!important;
}
html[data-theme="dark"] .btn.secondary,html[data-theme="dark"] .btn.ghost,html[data-theme="dark"] .icon-btn,html[data-theme="dark"] .theme-toggle{
  background:#211936!important;color:#f7f2ff!important;-webkit-text-fill-color:#f7f2ff!important;border-color:#3b2d53!important;
}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;box-shadow:var(--tn-focus)}

/* Layout containment. */
main,section,article,.page,.content,.panel,.card,.box,.modal,.sheet,.form,.toolbar,.actions,.form-actions,.panel-head,.panel-header,.section-head{
  min-width:0;max-width:100%;
}
img,svg,video{max-width:100%;height:auto}
.panel,.card,.box,.modal,.sheet,.ticket-card,.order-card,.product-card,.stat-card{overflow:hidden}
.panel-body,.panel-head,.panel-header,.section-head{min-width:0}
.panel-head,.panel-header,.section-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.panel-head>*:first-child,.panel-header>*:first-child,.section-head>*:first-child{min-width:0;flex:1 1 180px}
.panel-head>button,.panel-head>.btn,.panel-header>button,.panel-header>.btn,.section-head>a,.section-head>button{flex:0 1 auto;max-width:100%}

.form-actions,.actions,.toolbar,.upload-row,.order-actions,.delivery-actions,.payment-admin-actions,.media-actions,.ticket-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;max-width:100%;
}
.form-actions>*,.actions>*,.toolbar>*,.upload-row>*,.order-actions>*,.delivery-actions>*,.payment-admin-actions>*,.media-actions>*,.ticket-actions>*{min-width:0;max-width:100%}

/* Product/category grids remain inside the viewport. */
.grid,.product-grid,.cat-row{min-width:0;max-width:100%;grid-template-columns:repeat(2,minmax(0,1fr))!important}
.cat-chip{min-width:0;max-width:100%;overflow:hidden}
.cat-chip span,.card-name,.card-cat,.card-price{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal}

.table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
table{max-width:100%}
table.data th,table.data td{overflow-wrap:anywhere;word-break:break-word;white-space:normal;vertical-align:middle}

/* Header containment without changing the desktop design. */
.topbar-inner,.header-icons,.brand{min-width:0;max-width:100%}
.brand-name{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-icons{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.currency-switcher{min-width:0;max-width:120px}
.theme-toggle{flex:0 1 auto;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:7px}

/* Unified theme control on pages that previously had none. */
.tn-global-theme-toggle{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:99990;
  min-width:44px;min-height:42px;padding:9px 12px;border:1px solid var(--tn-border);border-radius:12px;
  background:var(--tn-surface);color:var(--tn-text);box-shadow:var(--tn-shadow);font:700 12px/1.2 inherit;cursor:pointer;
}
.tn-global-theme-toggle .tn-theme-label{margin-left:5px;white-space:nowrap}

/* Admin category editor: stable at all widths. */
#categories-list{min-width:0;max-width:100%}
#categories-list input,#categories-list textarea,#categories-list select,#categories-list button{min-width:0;max-width:100%;box-sizing:border-box}

@media(max-width:680px){
  .topbar-inner{flex-wrap:wrap;gap:7px}
  .header-icons{flex:1 1 240px}
  .section-head,.panel-head,.panel-header{align-items:flex-start}
  .form-actions>.btn,.actions>.btn,.order-actions>.btn,.delivery-actions>.btn,.payment-admin-actions>.btn,.media-actions>.btn{flex:1 1 100%;width:100%}
  .toolbar>.btn{flex:1 1 140px}
  .grid,.product-grid,.cat-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .table-wrap table{min-width:520px}
  .tn-global-theme-toggle .tn-theme-label{display:none}
}
@media(max-width:390px){
  .grid,.product-grid,.cat-row{grid-template-columns:1fr!important}
  .header-icons{flex-basis:100%}
  .currency-switcher{max-width:96px}
}