:root{ --brand:#0F2745; --bg:#f7f7fb; }
*{ box-sizing:border-box }
body{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; margin:0; background:var(--bg); color:#222; }
.header{ background:white; border-bottom:1px solid #e8e8ee; padding:16px 24px; display:flex; justify-content:space-between; align-items:center; }
.brand img{ height:36px; display:block; }
.container{ max-width:1100px; margin:24px auto; background:white; border:1px solid #eee; border-radius:16px; padding:24px; box-shadow:0 10px 25px rgba(0,0,0,.03);}
.btn{ display:inline-block; padding:12px 16px; border-radius:12px; background:var(--brand); color:white; text-decoration:none; border:none; cursor:pointer; font-weight:700; }
.btn.secondary{ background:#e8e9f3; color:#0F2745; }
.grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card{ border:1px solid #eee; border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.card h3{ margin:0; }
.small{ color:#666; font-size:13px; }
.form-section{ border:1px solid #eee; border-radius:12px; padding:16px; margin:16px 0; }
.form-section h3{ margin:0 0 8px 0; color:#0F2745; font-size:16px; }
.form-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
label{ display:block; font-size:14px; color:#0F2745; font-weight:700; margin-bottom:6px; }
input, textarea, select{ width:100%; padding:10px; border:1px solid #d5d5de; border-radius:10px; font-size:14px; }
.preview{ position:relative; padding:24px; border:1px dashed #ccc; min-height:420px; white-space:pre-wrap; line-height:1.6; }
.watermarkimg{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; opacity:.12; }
.watermarkimg img{ max-width:60%; max-height:60%; filter:grayscale(100%); }
.help-icon{ cursor:help; font-weight:800; display:inline-block; width:20px; text-align:center; }
.footer{ text-align:center; color:#888; font-size:13px; padding:24px 0; }
hr{ border:none; border-top:1px solid #eee; margin:24px 0; }
.banner{ margin-top:16px; }
.row{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.help-popup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.help-popup .popup-content {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    max-width: 400px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.help-icon {
    background: #6B52DF;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
}