/* KL APP – UI polish layer (loaded last). Clean, consistent, dark/light aware. */
:root{--radius:10px;--radius-lg:14px;--shadow:0 6px 24px rgba(0,0,0,.18);--ring:0 0 0 3px rgba(88,101,242,.28);--ease:.15s ease;color-scheme:dark}
body[data-theme="light"]{color-scheme:light}
body{-webkit-font-smoothing:antialiased;line-height:1.45}

/* Form controls: no more white native boxes */
select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea{
  background:var(--bg-dark);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);
  padding:9px 12px;font-size:14px;outline:none;transition:border-color var(--ease),box-shadow var(--ease)}
select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23949ba4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
select option{background:var(--bg-dark);color:var(--text)}
select:hover,input:hover,textarea:hover{border-color:var(--bg-hover)}
select:focus,input:focus,textarea:focus{border-color:var(--accent);box-shadow:var(--ring)}
::placeholder{color:var(--text-muted);opacity:.8}
textarea{resize:vertical}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--radius);
  transition:background var(--ease),transform var(--ease),border-color var(--ease),opacity var(--ease);text-decoration:none}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:none}
.btn:focus-visible,.admin-tab:focus-visible{outline:none;box-shadow:var(--ring)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-ghost:hover{background:var(--bg-hover)}
.btn-danger{background:var(--red);color:#fff}.btn-danger:hover{background:var(--red-hover)}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--bg-hover) transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted);background-clip:padding-box;border:2px solid transparent}

/* Admin shell */
.admin-header{backdrop-filter:blur(8px);padding:14px 28px}
.admin-tabs{gap:4px;padding:14px 28px 12px;border-bottom:1px solid var(--border);scrollbar-width:none}
.admin-tab{background:transparent;border-radius:var(--radius);padding:8px 14px;transition:background var(--ease),color var(--ease)}
.admin-tab:hover{background:var(--bg-mid);color:var(--text)}
.admin-tab.active{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(88,101,242,.35)}
.admin-body{padding:28px;max-width:1200px}

/* Cards, tables, toolbar */
.card,.stat,.table-wrap,.control-card,.bot-compose-card{border-radius:var(--radius-lg);border-color:var(--border);box-shadow:var(--shadow)}
.card{padding:22px}.card h2{font-size:17px;font-weight:700}
.card .card{box-shadow:none;background:var(--bg-dark);padding:16px}
.toolbar{align-items:center;gap:10px}.toolbar select{min-width:150px}
th{letter-spacing:.6px;background:rgba(0,0,0,.08)}td,th{padding:12px 16px}
.empty{padding:48px 20px;font-size:14px}
.tag-pill{padding:3px 9px}

/* Ticket cards */
.card .card [style*="max-height:200px"]{background:var(--bg-mid);border-radius:var(--radius);padding:4px}
.card .card a{color:var(--accent)}

/* Modals, toast */
.modal,.moderation-modal{border-radius:var(--radius-lg);box-shadow:0 20px 60px rgba(0,0,0,.45)}
#toast{border-radius:var(--radius);box-shadow:var(--shadow)}

@media(max-width:700px){.admin-header,.admin-tabs{padding-left:14px;padding-right:14px}.admin-body{padding:16px 14px}.card{padding:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}