body{font-family:"Be Vietnam Pro","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:36px;background:linear-gradient(160deg, #f3f4ff 0%, #ffffff 100%);color:#1e1b4b}.font-review-page{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:32px}.hero{display:flex;flex-direction:column;gap:12px;text-align:center}.hero .eyebrow{text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:rgba(30,27,75,.65);margin:0}.hero h1{margin:0;font-size:42px;font-weight:800;color:#1e1b4b}.hero .subtitle{margin:0 auto;max-width:600px;font-size:16px;color:rgba(30,27,75,.65)}.control-panel{display:flex;flex-direction:column;gap:24px}.panel{background:hsla(0,0%,100%,.92);backdrop-filter:blur(8px);border-radius:24px;padding:20px 24px;box-shadow:0 28px 45px rgba(67,56,202,.12);border:1px solid rgba(79,70,229,.1);display:flex;flex-direction:column;gap:14px}.panel h2{font-size:18px;font-weight:700;margin:0;color:#312e81}.panel .panel-note{margin:0;font-size:14px;color:rgba(30,27,75,.65)}.panel h3{margin:0;font-size:16px;font-weight:700;color:#312e81}.panel-heading{display:flex;flex-direction:column;gap:8px}.panel-sources{padding:26px 28px}.source-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:20px;margin-top:22px}.source-card{background:hsla(0,0%,100%,.82);border-radius:20px;border:1px solid rgba(79,70,229,.12);padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 18px 32px rgba(67,56,202,.08);position:relative}.source-card p{margin:0;font-size:14px;color:rgba(30,27,75,.65)}.source-header{display:flex;align-items:center;gap:14px}.source-icon{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg, rgba(79, 70, 229, 0.95), rgba(59, 130, 246, 0.9));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;letter-spacing:.12em;color:#fff;text-transform:uppercase}.source-tip{font-size:13px;color:#4338ca;margin-top:-2px}.upload-dropzone{border:1.5px dashed rgba(79,70,229,.35);border-radius:16px;padding:24px 20px;text-align:center;background:hsla(0,0%,100%,.9);display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.upload-dropzone input[type=file]{display:none}.upload-dropzone .dropzone-text{font-size:14px;font-weight:600;color:#312e81}.upload-dropzone:hover{border-color:#4338ca;box-shadow:0 12px 30px rgba(79,70,229,.12)}.input-wrap{display:flex;flex-direction:column;gap:8px}.input-wrap span{font-size:13px;font-weight:600;color:rgba(30,27,75,.65)}.input-wrap input[type=text],.input-wrap input[type=range],.input-wrap input[type=file]{border-radius:14px;border:1px solid rgba(79,70,229,.25);padding:12px 16px;font-size:15px;background-color:hsla(0,0%,100%,.85);transition:border .2s ease,box-shadow .2s ease}.input-wrap input[type=text]:focus,.input-wrap input[type=range]:focus,.input-wrap input[type=file]:focus{outline:none;border-color:#4338ca;box-shadow:0 0 0 3px rgba(99,102,241,.2)}.input-wrap input[type=range]{height:4px;padding:0;border-radius:999px;background:rgba(67,56,202,.1)}.input-wrap input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg, #4338ca, #312e81);box-shadow:0 12px 20px rgba(67,56,202,.3);cursor:pointer}.input-wrap input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg, #4338ca, #312e81);border:none;cursor:pointer}.upload-wrap input[type=file]{cursor:pointer}.font-suggestions{max-height:180px;overflow-y:auto;border-radius:16px;border:1px solid rgba(79,70,229,.15);background:hsla(0,0%,100%,.8);display:flex;flex-direction:column;gap:0;padding:6px 0;margin-top:4px}.font-suggestions .no-results{margin:0;padding:12px 16px;font-size:14px;color:rgba(30,27,75,.65)}.font-suggestions button{border:none;background:rgba(0,0,0,0);padding:10px 16px;text-align:left;font-size:15px;color:#1e1b4b;cursor:pointer;transition:background .15s ease}.font-suggestions button:hover,.font-suggestions button.active{background:rgba(67,56,202,.08)}.upload-status{font-size:13px;color:rgba(30,27,75,.65);margin:0}.panel-styles{gap:18px}.style-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:16px}.style-grid label{display:flex;flex-direction:column;gap:8px}.style-grid label .value{font-size:13px;color:#4338ca;font-weight:600}.style-actions{display:flex;flex-wrap:wrap;gap:18px}.style-actions label{display:flex;align-items:center;gap:8px;font-size:14px;color:#1e1b4b}.style-actions label input{width:16px;height:16px;accent-color:#4338ca}.demo-section{display:flex;flex-direction:column;gap:20px}.demo-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.demo-header h2{margin:0;font-size:20px;font-weight:700}.demo-header .btn-reset{border:none;border-radius:999px;padding:10px 18px;background:#4338ca;color:#fff;cursor:pointer;font-weight:600;box-shadow:0 16px 28px rgba(67,56,202,.2);transition:transform .2s ease}.demo-header .btn-reset:hover{transform:translateY(-1px)}textarea#demoInput{width:100%;min-height:180px;border-radius:20px;padding:18px 20px;border:1px solid rgba(79,70,229,.2);background:hsla(0,0%,100%,.9);font-size:15px;line-height:1.6;resize:vertical}textarea#demoInput:focus{outline:none;border-color:#4338ca;box-shadow:0 0 0 3px rgba(99,102,241,.2)}.preview-card{background:hsla(0,0%,100%,.92);border-radius:28px;padding:24px;border:1px solid rgba(79,70,229,.12);box-shadow:0 32px 60px rgba(79,70,229,.15);display:flex;flex-direction:column;gap:20px}.preview-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;color:rgba(30,27,75,.65)}.preview-meta span{background:rgba(67,56,202,.08);color:#312e81;padding:6px 12px;border-radius:999px;font-weight:600}.preview-output{min-height:180px;border-radius:20px;padding:28px;background:hsla(0,0%,100%,.96);border:1px dashed rgba(79,70,229,.3);font-size:42px;line-height:1.5;color:#1e1b4b}.css-snippet{background:rgba(15,23,42,.88);border-radius:18px;padding:18px 20px;color:#e0e7ff;display:flex;flex-direction:column;gap:12px}.css-snippet__header{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;color:#c7d2fe}.btn-copy{border:none;border-radius:999px;padding:6px 14px;background:rgba(99,102,241,.16);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s ease}.btn-copy:hover{background:rgba(99,102,241,.3)}.btn-copy.copied{background:rgba(129,140,248,.45)}#cssOutput{margin:0;font-family:"Fira Code","SFMono-Regular",Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word}@media(max-width: 768px){body{padding:24px}.preview-output{font-size:32px}}@media(max-width: 540px){body{padding:18px}.hero h1{font-size:32px}.preview-output{font-size:28px;padding:22px}}