/* admin.css - Premium Admin UI (no external libs) */
:root{
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface2:#f7f8fb;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --shadow2: 0 6px 16px rgba(0,0,0,.06);
  --accent:#111111;
  --danger:#d00000;
  --success:#2a7a2a;
  --warning:#b45309;
  --radius: 14px;
  --sidebar:#0f1115;
  --sidebarText:#c9ced6;
  --chip:#eef2ff;
  --chipText:#1f2937;
  --focus: rgba(17,17,17,.18);
}
body.admin-body.dark{
  --bg:#15161a;
  --surface:#1d1f25;
  --surface2:#181a20;
  --text:#eef2ff;
  --muted:#a5adbb;
  --border:#2a2d36;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow2: 0 6px 16px rgba(0,0,0,.28);
  --accent:#ffffff;
  --sidebar:#0b0c10;
  --sidebarText:#b7bfcc;
  --chip:#232633;
  --chipText:#e5e7eb;
  --focus: rgba(255,255,255,.18);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body.admin-body{
  margin:0;
  font-family:"Malgun Gothic","맑은 고딕",sans-serif;
  background:var(--bg);
  color:var(--text);
}
.admin-wrapper{ display:flex; min-height:100vh; }
.admin-sidebar{
  width:260px;
  background:var(--sidebar);
  color:var(--sidebarText);
  padding:18px 14px;
  position:fixed;      /* 핵심 */
	top:0;
	left:0;
	height:100vh;        /* 화면 전체 높이 */
	overflow-y:auto;     /* 메뉴 길어질 경우 스크롤 */
}
.admin-logo{
  height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  margin-bottom:10px;
}
.admin-logo .brand{ font-weight:800; letter-spacing:.2px; color:#fff; font-size:16px; }
.admin-logo .badge-chip{
  font-size:11px; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.08); color:#fff;
}
.admin-menu{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.admin-menu a{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:12px;
  color:var(--sidebarText); text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.admin-menu a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.admin-menu a.active{ background:rgba(255,255,255,.12); color:#fff; }
.admin-menu .ico{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.admin-menu .nav-badge{
  margin-left:auto; background:rgba(208,0,0,.95); color:#fff;
  font-size:11px; padding:2px 8px; border-radius:999px; line-height:16px;
}
.sidebar-close{
  display:none; position:absolute; top:10px; right:10px;
  width:38px; height:38px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
}
.admin-main{ margin-left:260px;   /* 사이드바 너비만큼 밀기 */
    flex:1;
    display:flex;
    flex-direction:column; }
.admin-header{
  position:sticky; top:0; z-index:900; height:auto;
  background:rgba(255,255,255,.75); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 18px;
}
body.admin-body.dark .admin-header{ background:rgba(29,31,37,.7); }
.admin-header-left, .admin-header-right{ display:flex; align-items:center; gap:10px; font-size:14px;}
.sidebar-toggle{
  display:none; width:34px; height:34px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  cursor:pointer; box-shadow: var(--shadow2);
}
.dark-toggle{
  width:34px; height:34px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  cursor:pointer; box-shadow: var(--shadow2);
}
.admin-user{
  display:flex; align-items:center; gap:10px;
  padding-left:10px; border-left:1px solid var(--border);
}
.admin-user .user-pill{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border);
  box-shadow: var(--shadow2);
}
.admin-user .user-dot{ width:8px; height:8px; border-radius:999px; background:var(--success); }
.admin-user button{
  border:none; background:var(--accent); color:var(--surface);
  padding:6px 12px; border-radius:16px; cursor:vpointer;
}
.admin-content{
  padding:22px; max-width:1280px; width:100%; margin:0 auto;
}
.admin-page-title{
  margin:0 0 14px 0; font-size:20px; font-weight:800; letter-spacing:-.2px;
}
.panel{
  background:var(--surface); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.panel .panel-head{
  padding:14px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.panel .panel-head .title{ font-weight:800; }
.panel .panel-body{ padding:16px; }
.cards{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:14px; margin-bottom:14px;
}
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow2);
  padding:14px;
}
.card .kpi-title{ font-size:12px; color:var(--muted); }
.card .kpi-value{ margin-top:6px; font-size:24px; font-weight:900; letter-spacing:-.3px; }
.card .kpi-sub{ margin-top:6px; font-size:12px; color:var(--muted); }
.grid-2{ display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; margin-bottom:14px; }
.grid-2.equal{ grid-template-columns: 1fr 1fr; }
@media (max-width:1100px){ .cards{ grid-template-columns: repeat(2,1fr); } .grid-2{ grid-template-columns:1fr; } }
.table-wrap{ overflow:auto; border-radius: var(--radius); }
table.admin-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:880px; }
.admin-table th,.admin-table td{
  padding:12px 12px; border-bottom:1px solid var(--border);
  font-size:13px; text-align:left; vertical-align:middle;
}
.admin-table th{
  position:sticky; top:0; background:var(--surface2); z-index:2;
  font-weight:800; color:var(--muted);
}
.admin-table tr:hover td{ background: rgba(17,17,17,.03); }
body.admin-body.dark .admin-table tr:hover td{ background: rgba(255,255,255,.04); }
.admin-table .actions{ /*display:flex; gap:8px; align-items:center; */}
.btn{
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  padding:8px 10px; border-radius:12px; cursor:pointer; font-size:12px;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{ border-color: var(--accent); }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.danger{ background:var(--danger); color:#fff; border-color:var(--danger); }
.btn.ghost{ background:transparent; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-size:12px;
  background:var(--chip); color:var(--chipText); border:1px solid var(--border);
}
.chip.dot:before{ content:''; width:7px; height:7px; border-radius:999px; background:var(--muted); }
.chip.ok.dot:before{ background:var(--success); }
.chip.warn.dot:before{ background:var(--warning); }
.chip.bad.dot:before{ background:var(--danger); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid .full{ grid-column:1/-1; }
@media (max-width:900px){ .form-grid{ grid-template-columns:1fr; } }
.field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:800; }
.field input,.field select,.field textarea{
  width:100%; border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:12px; padding:10px 12px; outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
  font-family:"Malgun Gothic","맑은 고딕",sans-serif;
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 4px var(--focus); }
.helper{ font-size:12px; color:var(--muted); margin-top:6px; }
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.searchbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.searchbar input{ width:260px;  border:1px solid #dcdcdc; height:34px; border-radius:5px; outline:none;}

@media (max-width:520px){ .searchbar input{ width:100%; } }
.chart{
  width:100%; height:260px; border-radius: var(--radius); border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
  overflow:hidden;
}
body.admin-body.dark .chart{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); }
.legend{ display:flex; gap:10px; flex-wrap:wrap; }
.legend .key{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.legend .swatch{ width:10px; height:10px; border-radius:3px; background: var(--accent); }
.admin-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1100;
}
.admin-overlay.show{ display:block; }
@media (max-width:1024px){
  .sidebar-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .admin-sidebar{
    position:fixed; top:0; left:-260px; height:100%;
    z-index:1200; box-shadow:0 10px 40px rgba(0,0,0,.35);
    transition:left .25s ease;
  }
  .admin-sidebar.open{ left:0; }
  .sidebar-close{ display:block; }
  .admin-content{ padding:16px; }
  .admin-main {
        margin-left:0;  /* 모바일에서는 밀지 않음 */
    }
}
.mt8{ margin-top:8px; } .mt12{ margin-top:12px; } .mt16{ margin-top:16px; }
.right{ text-align:right; } .muted{ color:var(--muted); }



/* ===== 대시보드 반응형 ===== */
.dashboard-grid {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
	margin-bottom:14px;
}

@media (max-width:1100px){
    .dashboard-grid {
        grid-template-columns:1fr;
    }
}

/* ===== 주문 카드 ===== */
.order-card {
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px;
    margin-bottom:12px;
    background:var(--surface2);
    transition:all .2s ease;
}

.order-card:hover {
    box-shadow:var(--shadow2);
}

.order-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
    font-weight:700;
}

.order-no {
    font-size:13px;
}

.order-body {
    font-size:13px;
    color:var(--muted);
    line-height:1.6;
}

/* ===== 게시물 카드 ===== */
.board-card {
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px;
    margin-bottom:12px;
    background:var(--surface2);
    transition:all .2s ease;
}

.board-card:hover {
    box-shadow:var(--shadow2);
}

.board-title {
    font-weight:700;
    margin-bottom:6px;
}

.board-meta {
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:var(--muted);
}
.chart {
    height:260px;
}
.chart svg {
    width:100%;
    height:auto;        /* 핵심 */
    display:block;
}

.chart text {
    font-family:"Malgun Gothic","맑은 고딕",sans-serif;
    dominant-baseline: middle;
}
@media (max-width:768px){
    .chart {
        height:220px;
    }
}

input:not([type="checkbox"]),
select{  border:1px solid #ddd; padding:0 6px; min-height:34px;}

.search-input-wrap > input {width:100%;}


/* ===== FIXED NOTICE (BOTTOM RIGHT) ===== */
.fixed-notice{
	position:fixed;
	right:18px;
	bottom:18px;
	width:360px;
	max-width:calc(100vw - 36px);
	border-radius:16px;
	border:1px solid var(--border);
	background:var(--surface);
	box-shadow:var(--shadow);
	z-index:3000;
	overflow:hidden;
	transform:translateY(0);
	opacity:1;
	transition:all .25s ease;
}

.fixed-notice.hide{
	transform:translateY(12px);
	opacity:0;
	pointer-events:none;
}

.fixed-notice-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:12px 14px;
	background:var(--surface2);
	border-bottom:1px solid var(--border);
}

.fixed-notice-title{
	display:flex;
	align-items:center;
	gap:10px;
	font-weight:900;
}

.fixed-notice-title .dot{
	width:10px;
	height:10px;
	border-radius:50%;
	background:#111;
	box-shadow:0 0 0 4px rgba(0,0,0,.08);
}

.admin-body.dark .fixed-notice-title .dot{
	background:#fff;
	box-shadow:0 0 0 4px rgba(255,255,255,.12);
}

.fixed-notice-close{
	width:36px;
	height:36px;
	border-radius:12px;
	border:1px solid var(--border);
	background:var(--surface);
	color:var(--text);
	cursor:pointer;
}

.fixed-notice-body{
	padding:14px;
}

.fixed-notice-list{
	list-style:none;
	padding:0;
	margin:0 0 12px;
	display:flex;
	flex-direction:column;
	gap:10px;
}

.fixed-notice-list li{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:10px 12px;
	border-radius:12px;
	border:1px solid var(--border);
	background:var(--surface2);
	font-size:13px;
}

.fixed-notice-list .meta{
	color:var(--muted);
	font-size:12px;
}

.fixed-notice-actions{
	display:flex;
	gap:8px;
	justify-content:flex-end;
	flex-wrap:wrap;
}

/* 기존 btn에 small 변형 */
.btn.small{
	height:36px;
	padding:0 12px;
	border-radius:12px;
	font-size:12px;
	display:inline-flex;
	align-items:center;
}

/* 모바일: 패널 숨기고 FAB 버튼만 */
.fixed-notice-fab{
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
	z-index:3100;
	height:44px;
	padding:0 14px;
	border-radius:999px;
	border:1px solid var(--border);
	background:var(--surface);
	color:var(--text);
	box-shadow:var(--shadow);
	cursor:pointer;
	font-weight:800;
}

.badge-mini{
	margin-left:8px;
	min-width:20px;
	height:20px;
	border-radius:999px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:12px;
	background:#111;
	color:#fff;
}

.admin-body.dark .badge-mini{
	background:#fff;
	color:#111;
}

@media (max-width:768px){
	.fixed-notice{
		display:none;
	}
	.fixed-notice-fab{
		display:inline-flex;
		align-items:center;
	}
	.fixed-notice-fab.hide{
		display:none;
	}
}

/* =========================
   2Depth Dark Sidebar Fix
========================= */

.menu-group {
	display:flex;
	flex-direction:column;
}

/* 1Depth 버튼 */
.menu-toggle-btn{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:11px 12px;
	background:transparent;
	border:none;
	color:#cfcfcf;              /* 기본 글자 밝은 회색 */
	cursor:pointer;
	font-size:14px;
	border-radius: 12px;
	font-weight:600;
	width:100%;
	text-align:left;
	transition:background .2s ease, color .2s ease;
}

.menu-toggle-btn:hover{
	background:#1a1a1a;
	color:#ffffff;
}

.menu-group.open > .menu-toggle-btn{
	background:#1a1a1a;
	color:#ffffff;
}

/* 화살표 */
.menu-group .arrow{
	transition:transform .2s ease;
	color:#888;
}

.menu-group.open .arrow{
	transform:rotate(180deg);
	color:#fff;
}

/* 2Depth 컨테이너 */
.sub-menu{
	display:none;
	flex-direction:column;
	background:#141414;   /* 사이드바와 어울리는 톤 */
}

.menu-group.open .sub-menu{
	display:flex;
}

/* 2Depth 링크 */
.sub-menu a{
	padding:12px 22px;
	font-size:13px;
	color:#9a9a9a;           /* hover 없어도 보이게 */
	text-decoration:none;
	transition:all .2s ease;
}

.sub-menu a:hover{
	background:#1f1f1f;
	color:#ffffff;
	padding-left:26px;
}

/* active */
.sub-menu a.active{
	background:#1f1f1f;
	color:#ffffff;
	font-weight:700;
}


.premium-header{
    min-height:72px;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
}

.admin-header-left,
.admin-header-center,
.admin-header-right{
    display:flex;
    align-items:center;
}
/* LEFT */
.admin-brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:900;
	cursor:pointer;
}

.brand-logo{
    width:34px;
    height:34px;
    border-radius:10px;
    background:var(--accent);
    color:var(--surface);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
}

.brand-title{
    font-size:14px;
    color:var(--text);
}

/* CENTER */
.admin-header-center{
    flex:1;
    display:flex;
    justify-content:center;
}

.company-chip{
    padding:6px 16px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--chip);
    color:var(--chipText);
    font-weight:900;
    font-size:13px;
}

/* RIGHT */
.admin-header-right{
    display:flex;
    align-items:center;
    gap:20px;
    position:relative;
}

.header-icon{
    position:relative;
    font-size:20px;
    cursor:pointer;
}

.icon-badge{
    position:absolute;
    top:-6px;
    right:-8px;
    background:var(--danger);
    color:#fff;
    font-size:10px;
    padding:2px 6px;
    border-radius:999px;
}

/* PROFILE */
.admin-profile{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
}

.profile-avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--accent);
    color:var(--surface);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
}

.profile-meta .name{
    font-size:13px;
    font-weight:900;
    color:var(--text);
}

.profile-meta .role{
    font-size:11px;
    color:var(--muted);
}

/* DROPDOWN */
.profile-dropdown{
    position:absolute;
    top:60px;
    right:0;
    width:200px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:var(--shadow);
    display:none;
    flex-direction:column;
    overflow:hidden;
}

.profile-dropdown a{
    padding:12px 16px;
    text-decoration:none;
    font-size:13px;
    color:var(--text);
}

.profile-dropdown a:hover{
    background:var(--surface2);
}

.profile-dropdown .divider{
    height:1px;
    background:var(--border);
}

.profile-dropdown.show{
    display:flex;
}

/* MOBILE */
@media(max-width:768px){
    .admin-header-center{display:none;}
    .profile-meta{display:none;}
}

.admin-header-center{
    position:relative;
}

.company-switcher{
    cursor:pointer;
}

.company-chip{
    padding:6px 16px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--chip);
    color:var(--chipText);
    font-weight:900;
    font-size:13px;
    display:flex;
    align-items:center;
    gap:8px;
}

.company-chip .arrow{
    font-size:11px;
    color:var(--muted);
}

/* DROPDOWN */
.company-dropdown{
    position:absolute;
    top:48px;
    left:50%;
    transform:translateX(-50%);
    width:180px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:var(--shadow);
    display:none;
    flex-direction:column;
    overflow:hidden;
    z-index:2000;
}

.company-dropdown a{
    padding:12px 15px;
    font-size:13px;
    text-decoration:none;
    color:var(--text);
}

.company-dropdown a:hover{
    background:var(--surface2);
}

.company-dropdown.show{
    display:flex;
}


/* ===== DASHBOARD NOTICE LAYER ===== */

.admin-notice-layer{
    position:fixed;
    inset:0;
    z-index:5000;
    display:flex;
    align-items:center;
    justify-content:center;
}

.notice-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.6);
}

.notice-box{
    position:relative;
    width:min(520px,calc(100% - 30px));
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:var(--shadow);
    animation:fadeUp .25s ease;
    overflow:hidden;
}

.notice-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:5px 20px;
    background:var(--surface2);
    border-bottom:1px solid var(--border);
}

.notice-header h3{
    font-size:16px;
    font-weight:900;
    color:var(--text);
}

.notice-header button{
    background:none;
    border:none;
    font-size:18px;
    cursor:pointer;
    color:var(--muted);
}

.notice-body{
    padding:20px;
    font-size:14px;
    color:var(--text);
    line-height:1.6;
}

.notice-body ul{
    margin-top:10px;
    padding-left:18px;
    color:var(--muted);
}

.notice-footer{
    padding:15px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid var(--border);
}

.notice-footer label{
    font-size:13px;
    color:var(--muted);
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


.notice-footer{
    padding:16px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid var(--border);
    background:var(--surface2);
}

.notice-left{
    display:flex;
    align-items:center;
}

/* 체크박스 커스텀 */
.custom-check{
    position:relative;
    padding-left:26px;
    cursor:pointer;
    font-size:13px;
    color:var(--muted);
    user-select:none;
}

.custom-check input{
    position:absolute;
    opacity:0;
    cursor:pointer;
}

.checkmark{
    position:absolute;
    left:0;
    top:2px;
    width:16px;
    height:16px;
    border-radius:4px;
    border:1px solid var(--border);
    background:var(--surface);
}

.custom-check input:checked ~ .checkmark{
    background:var(--accent);
    border-color:var(--accent);
}

.checkmark:after{
    content:"";
    position:absolute;
    display:none;
}

.custom-check input:checked ~ .checkmark:after{
    display:block;
}

.custom-check .checkmark:after{
    left:4px;
    top:1px;
    width:4px;
    height:8px;
    border:solid var(--surface);
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

/* 버튼 그룹 */
.notice-actions{
    display:flex;
    gap:10px;
}

.notice-actions .btnx{
    min-width:70px;
}

.setting-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:0 0 16px;
}

.setting-page-head .left{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.setting-page-head .kicker{
  font-size:12px;
  color:var(--muted);
}

.setting-page-head .title{
  font-size:20px;
  font-weight:900;
  color:var(--text);
}

.setting-page-head .right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}


/* ===== BUTTON ===== */

.btnx{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:40px;
  padding:0 14px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  font-weight:800;
  font-size:13px;
  transition:all .2s ease;
}

.btnx:hover{
  background:var(--surface2);
}

.btnx.primary{
  background:var(--accent);
  color:var(--surface);
  border-color:var(--accent);
}

.btnx.danger{
  background:var(--danger);
  color:#fff;
  border-color:var(--danger);
}

.btnx.ghost{
  background:transparent;
}