/* Shared presentation layer for the admin and agent portals. */
:root{
  --portal-glass:color-mix(in srgb,var(--agent-panel,var(--surface,#fff)) 88%,transparent);
  --portal-glass-soft:color-mix(in srgb,var(--agent-panel-soft,var(--soft,#f8fafc)) 78%,transparent);
  --portal-glass-line:color-mix(in srgb,var(--agent-line,var(--line,#dfe5ec)) 78%,transparent);
  --portal-glass-shadow:0 16px 44px rgba(20,37,63,.1);
  --portal-glass-shadow-hover:0 20px 52px rgba(20,37,63,.15);
  --portal-ease:cubic-bezier(.2,.8,.2,1);
}
.portal{
  --portal-glass:color-mix(in srgb,var(--agent-panel,#111a29) 88%,transparent);
  --portal-glass-soft:color-mix(in srgb,var(--agent-panel-soft,#162133) 82%,transparent);
  --portal-glass-line:color-mix(in srgb,var(--agent-line,#26344a) 78%,transparent);
  --portal-glass-shadow:0 18px 48px rgba(0,0,0,.28);
  --portal-glass-shadow-hover:0 22px 58px rgba(0,0,0,.36);
}

/* Shell and navigation */
.console-shell>aside,.portal>aside,.console-main>header{
  background:var(--portal-glass);
  border-color:var(--portal-glass-line);
  backdrop-filter:blur(22px) saturate(1.18);
}
.console-shell>aside,.portal>aside{box-shadow:8px 0 30px rgba(20,37,63,.045)}
nav button,.portal nav button,.logout{
  transition:color .18s ease,background .18s ease,transform .18s var(--portal-ease),box-shadow .18s ease;
}
nav button:hover,.portal nav button:hover,.logout:hover{transform:translateX(2px)}
nav button.active,.portal nav button.active{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 10%,transparent)}
.service-state,.identity-strip span{
  border-color:var(--portal-glass-line);
  background:var(--portal-glass-soft);
  backdrop-filter:blur(12px);
}

/* Cards, tables and summaries */
.console-shell .panel,.portal .panel,.console-shell .summary-grid article,.portal .summary-grid article,.console-shell .stats-grid article,.portal .stats-grid article,.console-shell .ticket-card,.portal .ticket-card,.console-shell .invite-card,.portal .invite-card,.agent-modal>section,.console-shell .modal-card,.console-shell .dialog-card{
  border-color:var(--portal-glass-line);
  background:var(--portal-glass);
  box-shadow:var(--portal-glass-shadow);
  backdrop-filter:blur(18px) saturate(1.12);
  transition:border-color .2s ease,box-shadow .22s ease,transform .22s var(--portal-ease);
}
.console-shell .panel:hover,.portal .panel:hover,.console-shell .summary-grid article:hover,.portal .summary-grid article:hover,.console-shell .stats-grid article:hover,.portal .stats-grid article:hover{
  border-color:color-mix(in srgb,#3978ef 20%,var(--portal-glass-line));
  box-shadow:var(--portal-glass-shadow-hover);
}
.console-shell .summary-grid article:hover,.portal .summary-grid article:hover,.console-shell .stats-grid article:hover,.portal .stats-grid article:hover{transform:translateY(-2px)}
.panel-head,.business-summary,th,td,.record-row,.order,.withdrawal-row,.agent-invite-section{
  border-color:var(--portal-glass-line);
}
.price-summary>div,.business-summary,.invite-prices span,.ticket-message,.rate-panel,.purchase-history-popover{
  background:var(--portal-glass-soft);
  border-color:var(--portal-glass-line);
}
.table-wrap,.agent-summary-table{scrollbar-color:color-mix(in srgb,#3978ef 35%,transparent) transparent}
tbody tr,.agent-summary-row{transition:background .16s ease,transform .16s ease}
tbody tr:hover,.agent-summary-row:not(.agent-summary-head):hover{background:color-mix(in srgb,#3978ef 6%,transparent)}

/* Controls */
.console-shell button,.portal button,.login-shell button,.console-shell .primary,.portal .primary,.console-shell .secondary,.portal .secondary,.console-shell .refresh-button,.portal .ghost,.portal .text-button,.console-shell input,.portal input,.login-shell input,.console-shell select,.portal select,.console-shell textarea,.portal textarea{
  transition:color .16s ease,background .16s ease,border-color .16s ease,box-shadow .18s ease,transform .16s var(--portal-ease),opacity .16s ease;
}
button:not(:disabled):active{transform:scale(.98)}
.primary:hover:not(:disabled),#save-prices:hover:not(:disabled),.panel-title button:not(.text-button):hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 9px 22px rgba(47,111,237,.25);
}
.secondary:hover:not(:disabled),.refresh-button:hover:not(:disabled),.ghost:hover:not(:disabled),.text-button:hover:not(:disabled){transform:translateY(-1px)}
input:focus,select:focus,textarea:focus,.input-wrap:focus-within{
  box-shadow:0 0 0 3px color-mix(in srgb,#3978ef 16%,transparent);
}

/* Login, overlays and feedback */
main.login-shell{position:relative;overflow:hidden;background:radial-gradient(circle at 16% 14%,rgba(57,120,239,.14),transparent 35%),radial-gradient(circle at 84% 82%,rgba(35,168,117,.09),transparent 32%),var(--portal-login-bg,#f4f6f8)}
main.login-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 22%,rgba(255,255,255,.035) 46%,transparent 70%)}
.login-shell .login-card{position:relative;border:1px solid var(--portal-glass-line);border-radius:20px;background:var(--portal-glass);box-shadow:0 28px 78px rgba(15,30,52,.2);backdrop-filter:blur(24px) saturate(1.2);animation:portal-card-in .38s var(--portal-ease) both}
.agent-modal,.modal-backdrop,.dialog-backdrop,.scrim{backdrop-filter:blur(7px);animation:portal-fade-in .18s ease both}
.agent-modal>section,.modal-card,.dialog-card{animation:portal-dialog-in .24s var(--portal-ease) both}
.alert,.toast{animation:portal-toast-in .24s var(--portal-ease) both;backdrop-filter:blur(14px)}
.page.active,.page-stack,.overview-page{animation:portal-page-in .24s var(--portal-ease) both}
.spinning{will-change:transform}

@keyframes portal-card-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes portal-dialog-in{from{opacity:0;transform:translateY(9px) scale(.975)}to{opacity:1;transform:none}}
@keyframes portal-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes portal-page-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes portal-fade-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .login-shell .login-card,.agent-modal,.agent-modal>section,.modal-backdrop,.modal-card,.dialog-backdrop,.dialog-card,.alert,.toast,.page.active,.page-stack,.overview-page{animation:none}
  .console-shell button,.portal button,.login-shell button,.console-shell input,.portal input,.login-shell input,.console-shell select,.portal select,.console-shell textarea,.portal textarea,nav button,.portal nav button,.logout,.panel,.summary-grid article,.stats-grid article{transition:none}
}