/* Shared antd-flavored component CSS for preview cards */
@import url("../colors_and_type.css");

* { box-sizing: border-box; }
body { margin:0; padding:20px; background:#fff; font-family:var(--font-family); font-size:14px; color:var(--color-text); }
.label { color:var(--color-text); font-weight:500; font-size:13px; margin-bottom:14px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 15px; border-radius:6px; border:1px solid #d9d9d9; background:#fff; color:var(--color-text); font-size:14px; font-family:inherit; cursor:pointer; transition:all .2s cubic-bezier(.645,.045,.355,1); line-height:1; }
.btn:hover { color:#4096ff; border-color:#4096ff; }
.btn:active { color:#0958d9; border-color:#0958d9; }
.btn-primary { background:#1677ff; border-color:#1677ff; color:#fff; box-shadow:0 2px 0 rgba(5,145,255,.1); }
.btn-primary:hover { background:#4096ff; border-color:#4096ff; color:#fff; }
.btn-primary:active { background:#0958d9; border-color:#0958d9; color:#fff; }
.btn-danger { background:#ff4d4f; border-color:#ff4d4f; color:#fff; }
.btn-danger:hover { background:#ff7875; border-color:#ff7875; color:#fff; }
.btn-dashed { border-style:dashed; }
.btn-text { border-color:transparent; background:transparent; }
.btn-text:hover { background:rgba(0,0,0,.06); border-color:transparent; color:var(--color-text); }
.btn-link { border-color:transparent; background:transparent; color:#1677ff; padding:0 8px; }
.btn-link:hover { color:#4096ff; background:transparent; border-color:transparent; }
.btn-disabled { color:rgba(0,0,0,.25); background:rgba(0,0,0,.04); border-color:#d9d9d9; cursor:not-allowed; box-shadow:none; }
.btn-sm { height:24px; padding:0 7px; font-size:14px; border-radius:4px; }
.btn-lg { height:40px; padding:0 15px; font-size:16px; }
.icon { width:1em; height:1em; display:inline-block; vertical-align:-.125em; }

/* Inputs */
.input { display:inline-flex; align-items:center; height:32px; padding:4px 11px; border-radius:6px; border:1px solid #d9d9d9; background:#fff; font-size:14px; font-family:inherit; color:var(--color-text); transition:all .2s; min-width:180px; }
.input:hover { border-color:#4096ff; }
.input:focus-within, .input.focus { border-color:#4096ff; box-shadow:0 0 0 2px rgba(5,145,255,.1); outline:none; }
.input input { border:none; outline:none; background:transparent; flex:1; font:inherit; color:inherit; padding:0; }
.input .addon { color:rgba(0,0,0,.45); }
.input.error { border-color:#ff4d4f; }
.input.error:focus-within { box-shadow:0 0 0 2px rgba(255,38,5,.06); }

/* Tags */
.tag { display:inline-flex; align-items:center; height:22px; padding:0 7px; border-radius:4px; font-size:12px; line-height:20px; background:#fafafa; border:1px solid #d9d9d9; color:var(--color-text); }
.tag-blue { background:#e6f4ff; border-color:#91caff; color:#0958d9; }
.tag-green { background:#f6ffed; border-color:#b7eb8f; color:#389e0d; }
.tag-red { background:#fff1f0; border-color:#ffa39e; color:#cf1322; }
.tag-gold { background:#fffbe6; border-color:#ffe58f; color:#d48806; }
.tag-purple { background:#f9f0ff; border-color:#d3adf7; color:#531dab; }
.tag-cyan { background:#e6fffb; border-color:#87e8de; color:#08979c; }
.tag-magenta { background:#fff0f6; border-color:#ffadd2; color:#c41d7f; }
.tag-volcano { background:#fff2e8; border-color:#ffbb96; color:#d4380d; }

/* Badge */
.badge { display:inline-flex; align-items:center; gap:8px; }
.badge-dot { width:6px; height:6px; border-radius:50%; display:inline-block; }
.badge-count { background:#ff4d4f; color:#fff; font-size:12px; padding:0 6px; height:20px; line-height:20px; border-radius:10px; min-width:20px; text-align:center; box-shadow:0 0 0 1px #fff; }

/* Switch */
.switch { display:inline-flex; align-items:center; width:44px; height:22px; background:rgba(0,0,0,.25); border-radius:100px; padding:2px; cursor:pointer; transition:background .2s; }
.switch.on { background:#1677ff; }
.switch .knob { width:18px; height:18px; background:#fff; border-radius:50%; transition:transform .2s cubic-bezier(.645,.045,.355,1); box-shadow:0 2px 4px rgba(0,35,11,.2); }
.switch.on .knob { transform:translateX(22px); }
.switch.lg { width:56px; height:28px; }
.switch.lg .knob { width:24px; height:24px; }
.switch.lg.on .knob { transform:translateX(28px); }

/* Checkbox / radio */
.checkbox, .radio { display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.checkbox-box { width:16px; height:16px; border:1px solid #d9d9d9; border-radius:4px; background:#fff; display:inline-flex; align-items:center; justify-content:center; transition:all .2s; }
.checkbox.checked .checkbox-box { background:#1677ff; border-color:#1677ff; }
.checkbox.checked .checkbox-box::after { content:''; width:6px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px); }
.radio-box { width:16px; height:16px; border:1px solid #d9d9d9; border-radius:50%; background:#fff; position:relative; transition:all .2s; }
.radio.checked .radio-box { border-color:#1677ff; }
.radio.checked .radio-box::after { content:''; position:absolute; inset:3px; background:#1677ff; border-radius:50%; }

/* Select */
.select { display:inline-flex; align-items:center; justify-content:space-between; gap:8px; height:32px; padding:0 11px; border-radius:6px; border:1px solid #d9d9d9; background:#fff; min-width:180px; cursor:pointer; transition:all .2s; }
.select:hover { border-color:#4096ff; }
.select .arr { color:rgba(0,0,0,.25); font-size:10px; }

/* Alert */
.alert { display:flex; gap:10px; padding:8px 12px; border-radius:6px; border:1px solid; align-items:flex-start; font-size:14px; }
.alert-info { background:#e6f4ff; border-color:#91caff; color:var(--color-text); }
.alert-info .icon { color:#1677ff; }
.alert-success { background:#f6ffed; border-color:#b7eb8f; }
.alert-success .icon { color:#52c41a; }
.alert-warning { background:#fffbe6; border-color:#ffe58f; }
.alert-warning .icon { color:#faad14; }
.alert-error { background:#fff2f0; border-color:#ffccc7; }
.alert-error .icon { color:#ff4d4f; }
.alert b { font-weight:500; display:block; margin-bottom:2px; }

/* Card */
.card { background:#fff; border:1px solid #f0f0f0; border-radius:8px; box-shadow:var(--shadow-1); overflow:hidden; }
.card-head { padding:12px 24px; border-bottom:1px solid #f0f0f0; font-weight:500; font-size:16px; min-height:48px; display:flex; align-items:center; justify-content:space-between; }
.card-body { padding:24px; }

/* Slider */
.slider-track { position:relative; height:4px; background:rgba(0,0,0,.04); border-radius:2px; }
.slider-fill { position:absolute; height:100%; background:#91caff; border-radius:2px; }
.slider-handle { position:absolute; top:-6px; width:14px; height:14px; background:#fff; border:2px solid #1677ff; border-radius:50%; box-shadow:0 0 0 2px rgba(5,145,255,.12); transform:translateX(-50%); }