
.fv-root{background:#fff;border-radius:14px;padding:12px;box-sizing:border-box}
.fv-root *{box-sizing:border-box}
.fv-card{background:rgba(255,255,255,.8);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:1rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.2);padding:24px}
.fv-card+.fv-card,.fv-tiprow{margin-top:24px}
.fv-cardhead{display:flex;align-items:center;margin-bottom:24px}
.fv-icob{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-right:16px;flex:none}
.fv-icob svg{width:24px;height:24px;color:#fff}
.fv-h2{font-size:24px;font-weight:700;color:oklch(27.8% .033 256.848);margin:0}
.fv-grad-blue{background:linear-gradient(to right,oklch(62.3% .214 259.815),oklch(54.6% .245 262.881))}
.fv-grad-green{background:linear-gradient(to right,oklch(72.3% .219 149.579),oklch(62.7% .194 149.214))}
.fv-grad-purple{background:linear-gradient(to right,oklch(62.7% .265 303.9),oklch(55.8% .288 302.321))}
.fv-grad-indigo{background:linear-gradient(to right,oklch(58.5% .233 277.117),oklch(51.1% .262 276.966))}
.fv-grad-red{background:linear-gradient(to right,oklch(63.7% .237 25.331),oklch(57.7% .245 27.325))}
/* ===== 上传区 ===== */
.fv-drop{position:relative;border:2px dashed oklch(87.2% .01 258.338);border-radius:12px;padding:48px 24px;text-align:center;cursor:pointer;background:oklch(98.5% .002 247.839);transition:all .3s}
.fv-drop:hover{border-color:oklch(70.7% .165 254.624);background:oklch(97% .014 254.604)}
.fv-drop-drag{border-color:oklch(70.7% .165 254.624);background:oklch(97% .014 254.604);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.fv-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.fv-drop-ico{width:64px;height:64px;margin:0 auto;color:oklch(70.7% .022 261.325)}
.fv-drop-txt{font-size:18px;color:oklch(44.6% .03 256.802);font-weight:500;margin:16px 0 0}
.fv-drop-sub{font-size:14px;color:oklch(55.1% .027 264.364);margin-top:8px}
.fv-drop-hint{margin-top:16px;padding:16px;background:oklch(97% .014 254.604);border-radius:8px;border:1px solid oklch(88.2% .059 254.128)}
.fv-drop-hint p{margin:0;font-size:14px;font-weight:500;color:oklch(51.1% .262 276.966)}
.fv-uploaded{border:2px solid oklch(92.5% .084 155.995);border-radius:12px;padding:24px;background:linear-gradient(to bottom right,oklch(98.2% .018 155.826),oklch(96.2% .044 156.743));display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.fv-uploaded-left{display:flex;align-items:center;min-width:0}
.fv-uploaded h3{font-size:18px;font-weight:600;color:oklch(44.8% .119 151.328);margin:0 0 4px}
.fv-uploaded p{margin:0}
.fv-uploaded-name{color:oklch(52.7% .154 150.069);word-break:break-all}
.fv-uploaded-size{font-size:14px;color:oklch(62.7% .194 149.214)}
.fv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:12px;padding:12px 24px;font-size:16px;font-weight:600;color:#fff;cursor:pointer;transition:all .3s;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.fv-btn svg{width:20px;height:20px}
.fv-btn-green{background:linear-gradient(to right,oklch(72.3% .219 149.579),oklch(62.7% .194 149.214))}
.fv-btn-green:hover{background:linear-gradient(to right,oklch(62.7% .194 149.214),oklch(52.7% .154 150.069))}
.fv-btn-red{background:linear-gradient(to right,oklch(63.7% .237 25.331),oklch(57.7% .245 27.325))}
.fv-btn-red:hover{background:linear-gradient(to right,oklch(57.7% .245 27.325),oklch(50.5% .213 27.518))}
.fv-btn-ml{margin-left:auto}
/* ===== 加载中 ===== */
.fv-loading{text-align:center;padding:48px}
.fv-spin{display:inline-block;width:48px;height:48px;border:4px solid oklch(88.2% .059 254.128);border-top-color:oklch(54.6% .245 262.881);border-radius:50%;animation:fv-spin 1s linear infinite}
@keyframes fv-spin{to{transform:rotate(360deg)}}
.fv-loading p{margin:0}
.fv-loading-t1{margin-top:16px!important;font-size:18px;color:oklch(44.6% .03 256.802);font-weight:500}
.fv-loading-t2{margin-top:8px!important;font-size:14px;color:oklch(55.1% .027 264.364)}
/* ===== 信息卡 ===== */
.fv-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.fv-ii{padding:24px;border-radius:12px;transition:all .3s}
.fv-ii:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);transform:scale(1.05)}
.fv-ii h3{font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:0 0 12px}
.fv-ii p{font-size:18px;font-weight:700;margin:0;word-break:break-all}
.fv-ii h4{font-size:18px;font-weight:700;margin:0 0 16px;display:flex;align-items:center}
.fv-ii h4 svg{width:20px;height:20px;margin-right:8px}
.fv-ii>p.desc{font-size:14px;color:oklch(44.6% .03 256.802);font-weight:400;line-height:1.6}
.fv-ii-blue{background:linear-gradient(to bottom right,oklch(97% .014 254.604),oklch(93.2% .032 255.585));border:1px solid oklch(88.2% .059 254.128)} .fv-ii-blue h3{color:oklch(42.4% .199 265.638)} .fv-ii-blue p{color:oklch(37.9% .146 265.522)}
.fv-ii-indigo{background:linear-gradient(to bottom right,oklch(96.2% .018 272.314),oklch(93% .034 272.788));border:1px solid oklch(87% .065 274.039)} .fv-ii-indigo h3{color:oklch(39.8% .195 277.366)} .fv-ii-indigo p{color:oklch(35.9% .144 278.697)}
.fv-ii-purple{background:linear-gradient(to bottom right,oklch(97.7% .014 308.299),oklch(94.6% .033 307.174));border:1px solid oklch(90.2% .063 306.703)} .fv-ii-purple h3{color:oklch(43.8% .218 303.724)} .fv-ii-purple p{color:oklch(38.1% .176 304.987)}
.fv-ii-pink{background:linear-gradient(to bottom right,oklch(97.1% .014 343.198),oklch(94.8% .028 342.258));border:1px solid oklch(89.9% .061 343.231)} .fv-ii-pink h3{color:oklch(45.9% .187 3.815)} .fv-ii-pink p{color:oklch(40.8% .153 2.432)}
.fv-ii-red{background:linear-gradient(to bottom right,oklch(97.1% .013 17.38),oklch(93.6% .032 17.717));border:1px solid oklch(88.5% .062 18.334)} .fv-ii-red h3{color:oklch(44.4% .177 26.899)} .fv-ii-red p{color:oklch(39.6% .141 25.723)}
.fv-ii-orange{background:linear-gradient(to bottom right,oklch(98% .016 73.684),oklch(95.4% .038 75.164));border:1px solid oklch(90.1% .076 70.697)} .fv-ii-orange h3{color:oklch(47% .157 37.304)} .fv-ii-orange p{color:oklch(40.8% .123 38.172)}
.fv-ii-yellow{background:linear-gradient(to bottom right,oklch(98.7% .026 102.212),oklch(97.3% .071 103.193));border:1px solid oklch(94.5% .129 101.54)} .fv-ii-yellow h3{color:oklch(47.6% .114 61.907)} .fv-ii-yellow p{color:oklch(42.1% .095 57.708)}
.fv-ii-lime{background:linear-gradient(to bottom right,oklch(98.6% .031 120.757),oklch(96.7% .067 122.328));border:1px solid oklch(93.8% .127 124.321)} .fv-ii-lime h3{color:oklch(45.3% .124 130.933)} .fv-ii-lime p{color:oklch(40.5% .101 131.063)}
.fv-ii-emerald{background:linear-gradient(to bottom right,oklch(97.9% .021 166.113),oklch(95% .052 163.051));border:1px solid oklch(90.5% .093 164.15)} .fv-ii-emerald h3{color:oklch(43.2% .095 166.913)} .fv-ii-emerald p{color:oklch(37.8% .077 168.94)}
/* ===== 预览 ===== */
.fv-pvsec{margin-bottom:24px}
.fv-label{display:block;font-size:14px;font-weight:500;color:oklch(37.3% .034 259.733);margin-bottom:12px}
.fv-purple-bold{color:oklch(55.8% .288 302.321);font-weight:700}
.fv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.fv-chip{display:inline-flex;align-items:center;padding:8px 16px;font-size:14px;background:linear-gradient(to right,oklch(94.6% .033 307.174),oklch(90.2% .063 306.703));color:oklch(43.8% .218 303.724);border:1px solid oklch(82.7% .119 306.383);border-radius:9999px;cursor:pointer;transition:all .3s}
.fv-chip:hover{background:linear-gradient(to right,oklch(90.2% .063 306.703),oklch(82.7% .119 306.383));box-shadow:0 4px 6px -1px rgba(0,0,0,.1);transform:translateY(-1px)}
.fv-textarea{width:100%;padding:16px;border:2px solid oklch(92.8% .006 264.531);border-radius:12px;font-size:18px;resize:none;line-height:1.5;font-family:inherit;background:#fff;color:inherit;transition:all .3s}
.fv-textarea:focus{outline:none;border-color:oklch(62.7% .265 303.9);box-shadow:0 0 0 4px oklch(94.6% .033 307.174)}
.fv-range-row{display:flex;align-items:center;gap:16px}
.fv-range{-webkit-appearance:none;appearance:none;flex:1;height:12px;background:oklch(92.8% .006 264.531);border-radius:8px;outline:none;cursor:pointer;transition:background .2s}
.fv-range:hover{background:oklch(87.2% .01 258.338)}
.fv-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:oklch(55.8% .288 302.321);cursor:pointer;border:none}
.fv-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:oklch(55.8% .288 302.321);cursor:pointer;border:none}
.fv-rangenum{font-size:14px;color:oklch(55.1% .027 264.364);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;min-width:48px;text-align:right}
.fv-pvbox{border:2px solid oklch(90.2% .063 306.703);border-radius:12px;padding:32px;background:linear-gradient(to bottom right,oklch(97.7% .014 308.299),oklch(94.6% .033 307.174));min-height:80px;word-break:break-all;transition:all .3s}
.fv-pvbox:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1);transform:scale(1.02)}
/* ===== 字符查看器 ===== */
.fv-searchwrap{position:relative;margin-bottom:16px}
.fv-search{width:100%;padding:16px 16px 16px 48px;border:2px solid oklch(92.8% .006 264.531);border-radius:12px;font-size:18px;line-height:1.5;background:#fff;color:inherit;transition:all .3s}
.fv-search:focus{outline:none;border-color:oklch(58.5% .233 277.117);box-shadow:0 0 0 4px oklch(96.2% .018 272.314)}
.fv-search-ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:oklch(70.7% .022 261.325)}
.fv-found{font-size:14px;color:oklch(55.1% .027 264.364);margin-bottom:8px}
.fv-found b{font-weight:600;color:oklch(51.1% .262 276.966)}
.fv-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px;max-height:72rem;overflow-y:auto;padding:8px}
.fv-gitem{border:2px solid oklch(92.8% .006 264.531);border-radius:12px;padding:16px;text-align:center;cursor:pointer;transition:all .3s}
.fv-gitem:hover{transform:scale(1.05);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);border-color:oklch(78.5% .115 274.713)}
.fv-gitem-sel{border-color:oklch(58.5% .233 277.117);background:oklch(96.2% .018 272.314);box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}
.fv-gchar{font-size:36px;margin-bottom:12px;height:64px;display:flex;align-items:center;justify-content:center;color:oklch(27.8% .033 256.848)}
.fv-guni{font-size:12px;color:oklch(51.1% .262 276.966);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:600;margin-bottom:8px}
.fv-gname{font-size:12px;color:oklch(44.6% .03 256.802);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-gfam{font-size:12px;color:oklch(70.7% .022 261.325);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-empty{text-align:center;padding:48px 0;color:oklch(55.1% .027 264.364)}
.fv-empty .fv-empty-ico{font-size:36px;margin-bottom:8px}
.fv-empty p{margin:0}
.fv-empty-t1{font-size:18px}
.fv-empty-t2{font-size:14px;color:oklch(70.7% .022 261.325);margin-top:4px!important}
/* ===== 弹窗 ===== */
.fv-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.fv-modal-box{background:#fff;border-radius:1rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);max-width:32rem;width:100%;overflow:hidden;animation:fv-in .3s ease}
@keyframes fv-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fv-modal-head{background:linear-gradient(to right,oklch(58.5% .233 277.117),oklch(55.8% .288 302.321));padding:24px;color:#fff;display:flex;justify-content:space-between;align-items:center}
.fv-modal-head h3{font-size:20px;font-weight:700;margin:0}
.fv-modal-close{background:none;border:none;color:rgba(255,255,255,.8);font-size:24px;cursor:pointer;line-height:1;padding:0}
.fv-modal-close:hover{color:#fff}
.fv-modal-body{padding:24px}
.fv-modal-char{font-size:96px;text-align:center;margin-bottom:12px;height:128px;display:flex;align-items:center;justify-content:center;color:oklch(27.8% .033 256.848)}
.fv-modal-uni{text-align:center;font-size:18px;color:oklch(51.1% .262 276.966);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:700}
.fv-modal-font{text-align:center;font-size:14px;color:oklch(55.1% .027 264.364);margin-top:8px}
.fv-mrows{margin-top:24px}
.fv-mrow{display:flex;justify-content:space-between;align-items:center;padding:12px;background:oklch(98.5% .002 247.839);border-radius:8px;transition:background .2s}
.fv-mrow+.fv-mrow{margin-top:8px}
.fv-mrow:hover{background:oklch(96.7% .003 264.542)}
.fv-mrow span:first-child{color:oklch(44.6% .03 256.802);font-weight:500}
.fv-mrow span:last-child{font-weight:600;color:oklch(27.8% .033 256.848);word-break:break-all;text-align:right}
/* ===== 开始使用 ===== */
.fv-start{text-align:center}
.fv-start-ico{font-size:96px;margin-bottom:24px}
.fv-start-title{font-size:24px;font-weight:700;color:oklch(27.8% .033 256.848);margin:0 0 16px}
.fv-start-sub{font-size:18px;color:oklch(44.6% .03 256.802);margin:0 0 24px}
.fv-feat4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;font-size:14px;color:oklch(55.1% .027 264.364);max-width:26rem;margin:0 auto}
.fv-feat4 div{display:flex;align-items:center;justify-content:center}
.fv-feat4 svg{width:20px;height:20px;margin-right:8px;color:oklch(72.3% .219 149.579);flex:none}
/* ===== 提示条 ===== */
.fv-tiprow{text-align:center}
.fv-tip{display:inline-flex;align-items:center;background:oklch(96.2% .018 272.314);border:1px solid oklch(87% .065 274.039);border-radius:9999px;padding:16px 32px}
.fv-tip svg{width:24px;height:24px;color:oklch(51.1% .262 276.966);margin-right:12px;flex:none}
.fv-tip span{color:oklch(39.8% .195 277.366);font-size:18px;font-weight:500}
/* ===== 响应式 ===== */
@media (max-width:1200px){.fv-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:992px){.fv-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.fv-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:720px){.fv-root{padding:6px}.fv-card{padding:16px}.fv-grid3{grid-template-columns:1fr}.fv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fv-feat4{grid-template-columns:1fr;gap:16px}.fv-drop{padding:32px 16px}.fv-ii:hover{transform:none}.fv-tip{display:flex;width:100%;text-align:left;border-radius:12px;padding:16px}.fv-btn-ml{margin-left:0}}
/* ===== 暗黑模式（本站 night 类挂在 body 上） ===== */
.night .fv-root{background:#242627}
.night .fv-card{background:rgba(35,38,42,.85);border-color:rgba(255,255,255,.08)}
.night .fv-h2{color:oklch(93% .01 264)}
.night .fv-drop{background:oklch(27% .02 256);border-color:oklch(38% .03 257)}
.night .fv-drop:hover{border-color:oklch(70.7% .165 254.624);background:oklch(31% .04 254)}
.night .fv-drop-drag{border-color:oklch(70.7% .165 254.624);background:oklch(31% .04 254)}
.night .fv-drop-txt{color:oklch(88% .01 256)}
.night .fv-drop-sub{color:oklch(68% .02 256)}
.night .fv-drop-hint{background:oklch(31% .04 254);border-color:oklch(42% .07 255)}
.night .fv-drop-hint p{color:oklch(80% .07 260)}
.night .fv-uploaded{background:linear-gradient(to bottom right,oklch(30% .05 155),oklch(27% .05 155));border-color:oklch(40% .08 155)}
.night .fv-uploaded h3{color:oklch(85% .08 155)}
.night .fv-uploaded-name{color:oklch(78% .06 155)}
.night .fv-uploaded-size{color:oklch(70% .08 155)}
.night .fv-loading-t1{color:oklch(88% .01 256)}
.night .fv-loading-t2{color:oklch(68% .02 256)}
.night .fv-ii{background:oklch(29% .02 256);border-color:oklch(40% .03 257)}
.night .fv-ii h3{color:oklch(80% .05 260)}
.night .fv-ii p{color:oklch(90% .01 264)}
.night .fv-ii h4{color:oklch(88% .02 260)}
.night .fv-ii>p.desc{color:oklch(72% .02 256)}
.night .fv-label{color:oklch(85% .01 260)}
.night .fv-chip{background:linear-gradient(to right,oklch(32% .05 303),oklch(30% .05 303));border-color:oklch(42% .08 303);color:oklch(80% .07 305)}
.night .fv-textarea{background:oklch(27% .02 256);border-color:oklch(38% .03 257);color:oklch(92% .01 260)}
.night .fv-textarea:focus{border-color:oklch(62.7% .265 303.9);box-shadow:0 0 0 4px oklch(38% .08 303)}
.night .fv-range{background:oklch(38% .03 257)}
.night .fv-range:hover{background:oklch(42% .03 257)}
.night .fv-rangenum{color:oklch(68% .02 256)}
.night .fv-pvbox{background:linear-gradient(to bottom right,oklch(30% .05 305),oklch(28% .05 305));border-color:oklch(42% .08 303)}
.night .fv-search{background:oklch(27% .02 256);border-color:oklch(38% .03 257);color:oklch(92% .01 260)}
.night .fv-search:focus{border-color:oklch(58.5% .233 277.117);box-shadow:0 0 0 4px oklch(36% .06 275)}
.night .fv-found{color:oklch(68% .02 256)}
.night .fv-found b{color:oklch(78% .07 274)}
.night .fv-gitem{border-color:oklch(40% .03 257)}
.night .fv-gitem:hover{border-color:oklch(58.5% .233 277.117)}
.night .fv-gitem-sel{border-color:oklch(58.5% .233 277.117);background:oklch(34% .06 275)}
.night .fv-gchar{color:oklch(92% .01 260)}
.night .fv-guni{color:oklch(78% .07 274)}
.night .fv-gname{color:oklch(80% .02 256)}
.night .fv-gfam{color:oklch(62% .02 256)}
.night .fv-empty{color:oklch(68% .02 256)}
.night .fv-empty-t2{color:oklch(62% .02 256)}
.night .fv-modal-box{background:oklch(30% .02 256)}
.night .fv-modal-char{color:oklch(92% .01 260)}
.night .fv-modal-uni{color:oklch(78% .07 274)}
.night .fv-modal-font{color:oklch(68% .02 256)}
.night .fv-mrow{background:oklch(27% .02 256)}
.night .fv-mrow:hover{background:oklch(31% .02 256)}
.night .fv-mrow span:first-child{color:oklch(72% .02 256)}
.night .fv-mrow span:last-child{color:oklch(92% .01 260)}
.night .fv-start-title{color:oklch(93% .01 264)}
.night .fv-start-sub{color:oklch(72% .02 256)}
.night .fv-feat4{color:oklch(68% .02 256)}
.night .fv-tip{background:oklch(30% .04 274);border-color:oklch(42% .08 274)}
.night .fv-tip span{color:oklch(82% .07 274)}
