/* ════════════════════════════════════════════
     DESIGN TOKENS
  ════════════════════════════════════════════ */
  :root {
    --bg:          #f9f8f6;
    --bg2:         #f3f0eb;
    --surface:     #ffffff;
    --border:      #e6e2da;
    --border2:     #d3cec3;

    --gold:        #b08d57;
    --gold-lt:     #c9a97a;
    --gold-soft:   rgba(176,141,87,.1);
    --gold-bd:     rgba(176,141,87,.28);

    --ink:         #1b1914;
    --ink-mid:     #46433c;
    --ink-soft:    #787068;
    --ink-dim:     #ada79e;

    --accent:      #4f46e5;
    --accent-soft: rgba(79,70,229,.08);
    --accent-mid:  rgba(79,70,229,.18);
    --accent-hov:  #4338ca;

    --green:       #256b47;
    --green-soft:  rgba(37,107,71,.1);
    --red:         #9b2c2c;
    --red-soft:    rgba(155,44,44,.09);

    --r-xs:3px; --r-sm:5px; --r-md:9px; --r-lg:14px; --r-xl:20px; --r-2xl:28px;
    --ease: cubic-bezier(.4,0,.2,1);
    --spring: cubic-bezier(.16,1,.3,1);
    --sh-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
    --sh-md: 0 4px 14px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
    --sh-lg: 0 12px 36px rgba(0,0,0,.1),0 4px 10px rgba(0,0,0,.05);
  }

  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'DM Sans',system-ui,sans-serif;
    font-size:15px;line-height:1.6;
    background:var(--bg);color:var(--ink);
    min-height:100vh;-webkit-font-smoothing:antialiased;
  }
  body::before{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(ellipse 70% 45% at 90% 5%,rgba(176,141,87,.06) 0%,transparent 65%),
      radial-gradient(ellipse 55% 55% at 5% 90%,rgba(176,141,87,.05) 0%,transparent 60%);
  }

  /* ── PAGE ── */
  .page{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:52px 20px 80px;}

  /* ── HEADER ── */
  .hdr{text-align:center;margin-bottom:44px;animation:fadeUp .55s ease both;}
  .brand{display:inline-flex;align-items:center;gap:10px;font-family:'Cormorant Garamond',serif;
    font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:24px;}
  .brand::before,.brand::after{content:'';display:block;width:32px;height:1px;background:var(--gold-lt);}
  .hdr h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,5vw,2.9rem);font-weight:400;
    color:var(--ink);line-height:1.18;letter-spacing:-.01em;margin-bottom:10px;}
  .hdr h1 em{font-style:italic;color:var(--gold);}
  .hdr p{font-size:14px;color:var(--ink-soft);max-width:400px;margin:0 auto;}

  /* ── STEPS ── */
  .steps{display:flex;align-items:center;margin-bottom:32px;animation:fadeUp .6s .05s ease both;}
  .step{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;position:relative;}
  .step:not(:last-child)::after{
    content:'';position:absolute;top:15px;left:calc(50% + 19px);
    right:calc(-50% + 19px);height:1px;background:var(--border2);z-index:0;transition:background .3s;
  }
  .step.done:not(:last-child)::after{background:var(--gold-lt);}
  .step-dot{
    width:30px;height:30px;border-radius:50%;border:2px solid var(--border2);
    background:var(--surface);display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:600;color:var(--ink-dim);transition:all .25s var(--spring);z-index:1;
  }
  .step.active .step-dot{border-color:var(--gold);background:var(--gold);color:#fff;box-shadow:0 0 0 4px var(--gold-soft);}
  .step.done .step-dot{border-color:var(--gold-lt);background:var(--gold-lt);color:#fff;}
  .step-lbl{font-size:11px;font-weight:500;color:var(--ink-dim);white-space:nowrap;}
  .step.active .step-lbl{color:var(--gold);font-weight:600;}
  .step.done .step-lbl{color:var(--ink-soft);}

  /* ── CARD ── */
  .card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r-2xl);box-shadow:var(--sh-lg);overflow:hidden;
    animation:fadeUp .65s .08s ease both;
  }

  /* ── SECTION HEADER ── */
  .sec-hdr{
    display:flex;align-items:center;gap:9px;
    font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
    padding:26px 36px 0;margin-bottom:20px;
  }
  .sec-hdr::after{content:'';flex:1;height:1px;background:var(--border);}
  .sec-hdr svg,.sec-hdr .ico{flex-shrink:0;width:13px;height:13px;color:var(--gold);opacity:.8;}

  /* ── PANEL ── */
  .panel{display:none;padding:0 36px 32px;}
  .panel.active{display:block;}

  /* ── FORM ELEMENTS ── */
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .fgroup{margin-bottom:17px;}
  .fgroup:last-child{margin-bottom:0;}
  label{display:block;font-size:12px;font-weight:600;color:var(--ink-mid);margin-bottom:5px;letter-spacing:.01em;}
  label .req{color:var(--gold);margin-left:1px;}
  label .opt{font-size:10.5px;font-weight:400;color:var(--ink-dim);margin-left:4px;
    background:var(--bg2);border:1px solid var(--border);border-radius:3px;padding:0 4px;}

  input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{
    display:block;width:100%;padding:9px 12px;
    font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:400;color:var(--ink);
    background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-md);
    outline:none;transition:border-color .18s,box-shadow .18s,background .18s;
    -webkit-appearance:none;appearance:none;
  }
  select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ada79e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center;padding-right:34px;cursor:pointer;
  }
  input::placeholder,textarea::placeholder{color:var(--ink-dim);font-weight:300;font-size:13px;}
  input:focus,select:focus,textarea:focus{
    border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft);
  }
  input.err,select.err,textarea.err{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft);}
  textarea{resize:vertical;min-height:78px;line-height:1.6;}
  .hint{font-size:11.5px;color:var(--ink-dim);margin-top:5px;line-height:1.5;}
  .errmsg{font-size:11.5px;color:var(--red);margin-top:4px;display:none;}
  .errmsg.show{display:block;}
  .tmpl-errmsg{margin-top:8px;}
  .tmpl-grid.err .tmpl-card label{border-color:rgba(155,44,44,.5);background:var(--red-soft);}
  .tmpl-grid.err{animation:errShake .35s ease;}
  @keyframes errShake{0%,100%{transform:translateX(0);}20%{transform:translateX(-5px);}40%{transform:translateX(5px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}
  .dp-err .dp-input-btn{border-color:var(--red)!important;box-shadow:0 0 0 3px var(--red-soft)!important;}

  /* ── TEMPLATE CARDS ── */
  .tmpl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
  .tmpl-card input[type=radio]{position:absolute;opacity:0;width:0;height:0;}
  .tmpl-card label{
    display:flex;flex-direction:column;gap:5px;padding:13px 14px 11px;
    background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-lg);
    cursor:pointer;transition:all .18s;margin:0;font-size:13px;
    font-weight:500;color:var(--ink-mid);letter-spacing:0;text-transform:none;
  }
  .tmpl-card label:hover{border-color:var(--gold-bd);background:var(--gold-soft);}
  .tmpl-card input:checked+label{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 3px var(--gold-soft);}
  .tmpl-chip{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.06em;
    padding:1px 6px;border-radius:100px;background:var(--bg2);color:var(--ink-dim);}
  .tmpl-card input:checked+label .tmpl-chip{background:var(--gold-soft);color:var(--gold);}
  .tmpl-badge{font-size:11px;color:var(--ink-dim);font-weight:400;}

  /* ── TOGGLE ROW ── */
  .toggle-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:13px 16px;background:var(--accent-soft);border:1.5px solid var(--accent-mid);
    border-radius:var(--r-md);margin-bottom:20px;gap:12px;
  }
  .toggle-info{display:flex;flex-direction:column;gap:2px;}
  .toggle-title{font-size:13px;font-weight:500;color:var(--ink-mid);}
  .toggle-desc{font-size:11.5px;color:var(--ink-dim);}
  .sw{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0;}
  .sw input{opacity:0;width:0;height:0;}
  .sw-track{
    position:absolute;inset:0;border-radius:100px;background:var(--border2);
    transition:background .2s;cursor:pointer;
  }
  .sw-track::before{
    content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;
    border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);
  }
  .sw input:checked+.sw-track{background:var(--accent);}
  .sw input:checked+.sw-track::before{transform:translateX(16px);}

  /* ── SUB DIVIDER ── */
  .sub-div{
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
    color:var(--ink-soft);padding:6px 0 10px;border-bottom:1px dashed var(--border);
    margin-bottom:14px;display:flex;align-items:center;gap:7px;
  }
  .sub-div::before{
    content:'';display:inline-block;width:3px;height:10px;
    background:var(--accent);border-radius:2px;opacity:.5;
  }

  /* ══════════════════════════════════════════
     DATE PICKER (ported from dashboard)
  ══════════════════════════════════════════ */
  .dp-label{font-size:11px;font-weight:600;color:var(--ink-soft);letter-spacing:.1px;}
  .dp-input-btn{
    display:flex;align-items:center;gap:7px;width:100%;
    background:var(--bg);border:1.5px solid var(--border);
    border-radius:var(--r-md);padding:8px 11px;cursor:pointer;
    transition:all .15s var(--ease);font-family:'DM Sans',sans-serif;position:relative;
  }
  .dp-input-btn:hover{border-color:var(--border2);background:#faf9f7;}
  .dp-input-btn.active{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft);}
  .dp-input-btn-text{flex:1;font-size:13px;color:var(--ink);text-align:left;}
  .dp-input-btn-text.empty{color:var(--ink-dim);font-size:13px;font-weight:300;}
  .dp-input-btn-icon{color:var(--ink-soft);flex-shrink:0;width:14px;height:14px;}
  .dp-clear-btn{
    background:none;border:none;cursor:pointer;color:var(--ink-dim);
    font-size:12px;padding:2px 4px;border-radius:3px;line-height:1;
    transition:color .12s;flex-shrink:0;
  }
  .dp-clear-btn:hover{color:var(--red);}

  /* Row countdown */
  .dp-cd-row{display:flex;gap:8px;align-items:flex-end;}
  .dp-cd-date{flex:1;}
  .dp-cd-time{flex:0 0 82px;}

  /* Waktu range row */
  .dp-waktu-row{display:flex;gap:6px;align-items:flex-end;flex-wrap:nowrap;}
  .dp-waktu-col{display:flex;flex-direction:column;gap:3px;flex:1;}
  .dp-waktu-col.dp-waktu-tz{flex:0 0 70px;}
  .dp-waktu-col.dp-waktu-col-custom{flex:0 0 82px;}
  .dp-waktu-dash{color:var(--ink-dim);font-size:13px;padding-bottom:10px;flex-shrink:0;}

  /* Time inputs */
  .dp-time-wrap{
    display:flex;align-items:center;gap:3px;
    background:var(--bg);border:1.5px solid var(--border);
    border-radius:var(--r-md);padding:8px 9px;width:100%;
  }
  .dp-time-wrap:focus-within{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft);}
  .dp-time-num{
    width:26px;background:transparent;border:none;outline:none;
    font-size:13px;color:var(--ink);text-align:center;
    font-family:'DM Sans',sans-serif;-moz-appearance:textfield;
  }
  .dp-time-num::-webkit-outer-spin-button,.dp-time-num::-webkit-inner-spin-button{-webkit-appearance:none;}
  .dp-time-sep{color:var(--ink-soft);font-weight:600;font-size:14px;line-height:1;}
  .dp-end-select{
    width:100%;background:transparent;border:none;outline:none;
    font-size:12.5px;color:var(--ink-mid);font-family:'DM Sans',sans-serif;
    cursor:pointer;font-weight:500;-webkit-appearance:none;
  }
  .dp-tz-select{
    width:100%;background:transparent;border:none;outline:none;
    font-size:12.5px;color:var(--ink-mid);font-family:'DM Sans',sans-serif;
    cursor:pointer;font-weight:500;
  }

  /* Preview text */
  .dp-preview{
    margin-top:5px;font-size:11px;font-family:'SF Mono','Fira Code',monospace;
    color:var(--green);font-weight:500;letter-spacing:.05px;
    display:flex;align-items:center;gap:5px;min-height:17px;
  }
  .dp-preview:empty{display:none;}
  .dp-preview-dot{width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0;}

  /* Kalender popup */
  .dp-popover{
    position:fixed;z-index:9999;background:var(--surface);
    border:1px solid var(--border2);border-radius:var(--r-lg);
    box-shadow:0 8px 32px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.08);
    padding:12px;width:248px;display:none;
    animation:dpFadeIn .14s var(--spring);
  }
  .dp-popover.open{display:block;}
  @keyframes dpFadeIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

  .dp-cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
  .dp-cal-nav{
    width:28px;height:28px;background:var(--bg);border:1px solid var(--border);
    border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--ink-soft);font-size:14px;transition:all .12s;
  }
  .dp-cal-nav:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
  .dp-cal-my{font-size:13px;font-weight:600;color:var(--ink);}

  .dp-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px;}
  .dp-cal-dow span{text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;
    letter-spacing:.3px;color:var(--ink-dim);padding:2px 0;}
  .dp-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;}
  .dp-cal-cell{
    aspect-ratio:1;display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:500;color:var(--ink-mid);
    border-radius:var(--r-sm);cursor:pointer;transition:all .12s;
    position:relative;user-select:none;
  }
  .dp-cal-cell:hover:not(.dp-empty):not(.dp-selected){background:var(--accent-soft);color:var(--accent);}
  .dp-cal-cell.dp-empty{cursor:default;}
  .dp-cal-cell.dp-today{font-weight:700;color:var(--accent);}
  .dp-cal-cell.dp-today::after{
    content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
    width:3px;height:3px;border-radius:50%;background:var(--accent);
  }
  .dp-cal-cell.dp-selected{background:var(--accent);color:#fff;font-weight:700;}
  .dp-cal-cell.dp-selected:hover{background:var(--accent-hov);}

  /* ── REKENING ── */
  .rek-group{
    background:var(--bg);border:1.5px solid var(--border);
    border-radius:var(--r-lg);padding:16px;margin-bottom:16px;
  }
  .rek-lbl{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:13px;}

  /* ── UPLOAD ── */
  .upload-zone{
    border:1.5px dashed var(--border2);border-radius:var(--r-md);
    background:var(--bg);padding:18px;text-align:center;cursor:pointer;
    transition:border-color .18s,background .18s;position:relative;overflow:hidden;
  }
  .upload-zone:hover{border-color:var(--gold-lt);background:var(--gold-soft);}
  .upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0;}
  .upload-zone-ico{font-size:22px;margin-bottom:6px;display:block;}
  .upload-zone-txt{font-size:13px;color:var(--ink-soft);font-weight:500;}
  .upload-zone-sub{font-size:11.5px;color:var(--ink-dim);margin-top:3px;}
  .upload-preview{
    display:none;align-items:center;gap:11px;padding:9px 13px;
    background:var(--green-soft);border:1.5px solid rgba(37,107,71,.2);
    border-radius:var(--r-md);margin-top:9px;
  }
  .upload-preview.show{display:flex;}
  .upload-preview img{width:42px;height:42px;object-fit:cover;border-radius:var(--r-sm);}
  .upload-preview-info{flex:1;min-width:0;}
  .upload-preview-name{font-size:12px;font-weight:500;color:var(--ink-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .upload-preview-status{font-size:11px;color:var(--green);}
  .btn-remove-img{background:none;border:none;color:var(--ink-dim);cursor:pointer;font-size:15px;padding:2px;line-height:1;flex-shrink:0;}
  .btn-remove-img:hover{color:var(--red);}
  .upload-prog{margin-top:7px;display:none;}
  .upload-prog.show{display:block;}
  .prog-track{height:3px;background:var(--border);border-radius:100px;overflow:hidden;}
  .prog-fill{height:100%;background:var(--accent);border-radius:100px;transition:width .25s;}
  .prog-lbl{font-size:11px;color:var(--ink-dim);margin-top:4px;}

  /* ── FOOTER ACTIONS ── */
  .panel-footer{
    display:flex;gap:10px;padding:18px 36px 26px;
    border-top:1px solid var(--border);
  }
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:11px 22px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;
    letter-spacing:.02em;border:none;border-radius:var(--r-md);cursor:pointer;
    transition:background .18s,transform .1s,box-shadow .18s;
  }
  .btn:active{transform:translateY(1px);}
  .btn-primary{background:var(--ink);color:#fff;box-shadow:var(--sh-sm);flex:1;}
  .btn-primary:hover{background:#2d2924;box-shadow:var(--sh-md);transform:translateY(-1px);}
  .btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;}
  .btn-ghost{background:transparent;color:var(--ink-soft);border:1.5px solid var(--border);flex-shrink:0;}
  .btn-ghost:hover{border-color:var(--border2);color:var(--ink-mid);}
  .btn-gold{
    background:linear-gradient(135deg,var(--gold) 0%,var(--gold-lt) 100%);color:#fff;
    box-shadow:0 2px 8px rgba(176,141,87,.35);flex:1;
  }
  .btn-gold:hover{box-shadow:0 4px 14px rgba(176,141,87,.45);transform:translateY(-1px);}
  .btn-gold:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;}
  .spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);
    border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none;}
  .btn.loading .spinner{display:block;}
  .btn.loading .btn-txt{opacity:.8;}

  /* ── SUCCESS ── */
  .success-state{display:none;padding:52px 36px 46px;text-align:center;}
  .success-state.show{display:block;}
  .success-ico{
    width:76px;height:76px;background:var(--green-soft);border-radius:50%;
    display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
    font-size:34px;animation:pop .5s .1s ease both;
  }
  .success-state h2{font-family:'Cormorant Garamond',serif;font-size:1.95rem;font-weight:400;margin-bottom:10px;}
  .success-state p{font-size:14px;color:var(--ink-soft);max-width:380px;margin:0 auto 6px;line-height:1.75;}
  .success-id{
    display:inline-block;background:var(--bg);border:1px solid var(--border);
    border-radius:var(--r-sm);padding:7px 16px;font-family:'SF Mono','Fira Code',monospace;
    font-size:13px;color:var(--gold);margin:12px 0 18px;letter-spacing:.04em;
  }
  .success-note{
    background:var(--green-soft);border:1px solid rgba(37,107,71,.18);
    border-radius:var(--r-lg);padding:14px 18px;font-size:13px;color:var(--green);
    text-align:left;line-height:1.7;max-width:420px;margin:0 auto;
  }
  .success-note strong{font-weight:600;}

  /* ── ANIMATIONS ── */
  @keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  @keyframes spin{to{transform:rotate(360deg);}}
  @keyframes pop{0%{transform:scale(.6);opacity:0;}70%{transform:scale(1.1);}100%{transform:scale(1);opacity:1;}}

  /* ── CONFIG ── */
  .cfg-wrap{display:none!important;}
  .cfg-toggle{
    display:flex;align-items:center;justify-content:center;gap:6px;
    font-size:12px;color:var(--ink-dim);cursor:pointer;background:none;border:none;
    font-family:inherit;padding:8px;border-radius:var(--r-sm);transition:color .15s;margin:0 auto;
  }
  .cfg-toggle:hover{color:var(--ink-soft);}
  .cfg-arrow{transition:transform .25s;font-size:10px;}
  .cfg-toggle.open .cfg-arrow{transform:rotate(180deg);}
  .cfg-box{
    display:none;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r-lg);padding:18px 22px;margin-top:8px;box-shadow:var(--sh-sm);
  }
  .cfg-box.show{display:block;}
  .cfg-box label{font-size:12px;font-weight:500;color:var(--ink-soft);}
  .cfg-box input{font-size:13px;font-family:'SF Mono','Fira Code',monospace;}
  .cfg-note{font-size:11.5px;color:var(--ink-dim);margin-top:10px;line-height:1.6;}

  /* ── RESPONSIVE ── */
  @media(max-width:540px){
    .page{padding:28px 12px 60px;}
    .panel,.sec-hdr{padding-left:18px;padding-right:18px;}
    .panel-footer{padding:14px 18px 20px;flex-wrap:wrap;}
    .frow{grid-template-columns:1fr;}
    .tmpl-grid{grid-template-columns:1fr;}
    .dp-waktu-row{flex-wrap:wrap;}
    .dp-waktu-col.dp-waktu-tz{flex:0 0 90px;}
    .success-state{padding:36px 18px 32px;}
  }