*{box-sizing:border-box}
.hw-page{min-height:100vh;padding:28px 14px 55px;background:radial-gradient(circle at 5% 5%,rgba(37,99,235,.14),transparent 28%),radial-gradient(circle at 95% 12%,rgba(16,185,129,.12),transparent 28%),linear-gradient(180deg,#f5f8ff,#edf3ff);font-family:Arial,sans-serif;color:#14213d}
.hw-container{max-width:1220px;margin:auto}
.hw-hero{padding:28px 22px 25px;text-align:center;color:#fff;border-radius:24px;background:linear-gradient(135deg,#061b42,#0869d9,#13b6d5);box-shadow:0 15px 40px rgba(15,48,100,.18);margin-bottom:20px}
.hw-brand{font-size:24px;font-weight:800;display:flex;gap:9px;align-items:center;justify-content:center;margin-bottom:6px}.hw-logo{font-size:31px}
.hw-hero h1{font-size:clamp(28px,5vw,48px);margin:8px 0 5px}.hw-hero h1 span{color:#ffe36e}.hw-hero p{margin:0;color:#e8f4ff;font-size:16px}
.hw-badges{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:18px}.hw-badges span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 12px;font-size:13px}
.hw-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.hw-card{background:#fff;border:1px solid #e0e7f2;border-radius:18px;overflow:hidden;box-shadow:0 10px 28px rgba(18,42,78,.08)}
.hw-card-head{height:55px;padding:0 17px;color:#fff;display:flex;align-items:center;justify-content:space-between;font-size:18px}.hw-card-head.blue{background:linear-gradient(90deg,#1687e8,#0969da)}.hw-card-head.green{background:linear-gradient(90deg,#10a36f,#079669)}
.hw-card-head button{border:0;background:rgba(255,255,255,.15);color:#fff;border-radius:9px;padding:8px 11px;cursor:pointer}.hw-card-body{padding:15px}.hw-row.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#253653}select{height:42px;border:1px solid #d4dce8;border-radius:10px;background:#fff;padding:0 10px;font-size:14px;color:#17243a;outline:none}
textarea{width:100%;height:345px;margin-top:14px;border:1px solid #ccd6e5;border-radius:12px;padding:15px;font-size:16px;line-height:1.65;resize:vertical;outline:none;background:#fbfdff;color:#17243a}textarea:focus,select:focus{border-color:#1677db;box-shadow:0 0 0 3px rgba(22,119,219,.10)}
.hw-counter{font-size:12px;color:#718096;margin-top:7px}.hw-preview-wrap{padding:12px;background:#eaf0f7}.hw-preview-wrap canvas{display:block;width:100%;height:auto;max-height:510px;object-fit:contain;border-radius:7px;box-shadow:0 7px 20px rgba(10,30,60,.16);background:#fff}
.hw-settings{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:15px;margin-top:18px;background:rgba(255,255,255,.82);border:1px solid #dce4ef;border-radius:16px}.hw-settings .check{justify-content:center;flex-direction:row;align-items:center;padding-top:19px;gap:8px}.hw-settings .check input{width:17px;height:17px}
.hw-actions{display:flex;justify-content:center;gap:11px;flex-wrap:wrap;margin:18px 0}.btn{border:0;border-radius:11px;padding:13px 20px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(30,60,100,.13)}.btn.preview{background:#0ca678}.btn.png{background:#1478df}.btn.pdf{background:#df3347}.btn.clear{background:#64748b}.btn:hover{transform:translateY(-1px)}
.hw-info{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid #dce4ef;border-radius:16px;overflow:hidden}.hw-info>div{padding:17px;border-right:1px solid #e5eaf1}.hw-info>div:last-child{border-right:0}.hw-info b{display:block;font-size:15px;margin-bottom:6px}.hw-info small{display:block;color:#66758b;line-height:1.5}


@media(max-width:900px){.hw-grid{grid-template-columns:1fr}.hw-settings{grid-template-columns:repeat(2,1fr)}.hw-info{grid-template-columns:1fr 1fr}.hw-preview-wrap canvas{max-height:none}}
@media(max-width:600px){.hw-page{padding:12px 8px 35px}.hw-hero{border-radius:16px;padding:23px 13px}.hw-row.two{grid-template-columns:1fr}.hw-settings{grid-template-columns:1fr}.hw-info{grid-template-columns:1fr}.hw-info>div{border-right:0;border-bottom:1px solid #e5eaf1}.hw-info>div:last-child{border-bottom:0}.hw-card-head{font-size:16px}textarea{height:280px}}