:root{
  --slate:#41495a; --amber:#f9b13c; --aqua:#00b3c4; --tango:#eb5b25;
  --lilac:#9d4a96; --blue:#5b6fb3; --emerald:#60bb9b; --watermelon:#e8335e;
  --bg:#2b313d; --panel:#363d4b; --line:#4c5466; --text:#eef1f5;
}
*{box-sizing:border-box;}
body{margin:0;font-family:Arboria,Arial,sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column;min-height:100vh;}
.topbar{padding:20px 28px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.topbar h1{margin:0;font-size:22px;}
.tagline{margin:4px 0 0;color:var(--amber);font-size:14px;}
.help-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:18px;cursor:pointer;}
.layout{display:flex;gap:28px;padding:28px;align-items:flex-start;flex-wrap:wrap;flex:1;}
.controls{flex:1 1 380px;max-width:480px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;}
.preview{flex:1 1 480px;display:flex;flex-direction:column;align-items:center;gap:14px;}
.canvas-wrap{display:block;text-align:center;width:100%;}
.preview #reframeWrap{width:100%;max-width:560px;}
.field{margin-bottom:16px;display:flex;flex-direction:column;gap:6px;}
.field label{font-size:13px;color:#aeb6c4;}
input[type=text],textarea,select{background:#222733;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:10px 12px;font-size:14px;font-family:inherit;}
textarea{min-height:80px;resize:vertical;}
.upload{display:inline-block;background:var(--slate);color:#fff;padding:10px 14px;border-radius:8px;cursor:pointer;font-size:13px;}
.upload input{display:none;}
.check{flex-direction:row !important;align-items:center;gap:8px;font-size:13px;color:var(--text);}
.check input{width:auto;}
.range-row{flex-direction:row !important;align-items:center;gap:10px;font-size:13px;color:#aeb6c4;}
.range-row span{flex:0 0 84px;}
.range-row input[type=range]{flex:1;padding:0;}
input[type=range]{accent-color:var(--amber);}
#reframeWrap{background:#222733;border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
hr{border:0;border-top:1px solid var(--line);margin:18px 0;}
.preset-list{display:flex;flex-direction:column;gap:12px;}
.preset-group{background:#222733;border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.preset-head{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--amber);margin-bottom:6px;}
.preset-group .check{margin:4px 0;}
.list-row{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px;flex-wrap:wrap;background:#222733;border:1px solid var(--line);border-radius:8px;padding:8px;}
.list-row .field{margin:0;flex:1 1 120px;}
button{font-family:inherit;}
#download{background:var(--amber);color:var(--slate);border:0;padding:12px 18px;border-radius:8px;font-weight:700;font-size:15px;cursor:pointer;width:100%;}
.ghost{background:transparent;border:1px solid var(--line);color:#aeb6c4;border-radius:8px;padding:8px 12px;cursor:pointer;font-size:13px;align-self:flex-start;}
.add-btn{background:var(--slate);color:#fff;border:0;border-radius:8px;padding:8px 12px;cursor:pointer;font-size:13px;}
.remove-btn{background:transparent;border:1px solid var(--line);color:#e8335e;border-radius:8px;padding:6px 10px;cursor:pointer;}
.note{font-size:12px;color:#8b93a3;line-height:1.5;}
code{background:#222733;padding:1px 5px;border-radius:4px;font-size:12px;}
canvas{display:block;margin:0 auto;width:100%;max-width:var(--cmax,560px);height:auto;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.45);background:var(--slate);}
.hidden{display:none;}
.lib-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.library{display:flex;flex-wrap:wrap;gap:10px;}
.lib-item{width:96px;background:#222733;border:1px solid var(--line);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:6px;align-items:center;}
.lib-item img{width:100%;height:60px;object-fit:contain;background:var(--slate);border-radius:4px;}
.lib-use{background:var(--slate);color:#fff;border:0;border-radius:6px;padding:5px 6px;font-size:11px;cursor:pointer;width:100%;}
.sitefoot{padding:18px 28px;border-top:1px solid var(--line);font-size:13px;color:#8b93a3;text-align:center;}
.sitefoot a{color:var(--amber);text-decoration:none;}
.sitefoot a:hover{text-decoration:underline;}
.tip-layer{position:fixed;inset:0;background:rgba(20,24,31,.55);z-index:50;}
.tip-card{position:fixed;left:50%;bottom:36px;transform:translateX(-50%);max-width:380px;width:calc(100% - 40px);background:var(--panel);border:1px solid var(--amber);border-radius:12px;padding:16px 18px;box-shadow:0 16px 50px rgba(0,0,0,.5);}
.tip-card.top{top:36px;bottom:auto;}
.tip-card p{margin:0 0 12px;font-size:14px;line-height:1.5;}
.tip-row{display:flex;justify-content:space-between;align-items:center;}
.tip-count{font-size:12px;color:#8b93a3;}
.tip-active{outline:3px solid var(--amber);outline-offset:3px;border-radius:8px;position:relative;z-index:60;}
.share-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.accordion-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;background:#222733;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:12px 14px;margin-top:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:left;}
.accordion-head::after{content:"\25BC";color:var(--amber);font-size:11px;line-height:1;transition:transform .15s ease;}
.accordion-head.open{border-color:var(--amber);}
.accordion-head.open::after{transform:rotate(180deg);}
.accordion-head:hover{border-color:var(--amber);}
.accordion-head + .docs{margin-top:6px;}
.docs{margin-top:16px;background:#222733;border:1px solid var(--line);border-radius:10px;padding:14px 16px;max-height:60vh;overflow:auto;}
.docs h3{margin:0 0 10px;font-size:15px;color:var(--amber);}
.docs h4{margin:16px 0 6px;font-size:13px;color:#aeb6c4;text-transform:uppercase;letter-spacing:.05em;}
.docs p{margin:6px 0;font-size:13px;line-height:1.5;}
.docs a{color:var(--amber);text-decoration:underline;}
.docs a:hover{color:#ffce7a;}
.docs-table{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:12px;}
.docs-table th{text-align:left;color:#8b93a3;font-weight:700;padding:4px 8px;border-bottom:1px solid var(--line);}
.docs-table td{padding:4px 8px;border-bottom:1px solid #2b313d;vertical-align:top;color:var(--text);}
.docs-table code{white-space:nowrap;}
.brand-notes{display:flex;flex-direction:column;gap:8px;margin:4px 0 0;}
.brand-note{border:1px solid var(--line);border-left-width:4px;border-radius:8px;padding:10px 12px;background:#222733;font-size:12px;line-height:1.5;}
.brand-note.info{border-left-color:var(--aqua);}
.brand-note.warn{border-left-color:var(--amber);}
.brand-note strong{display:block;margin-bottom:3px;color:var(--text);}
.brand-note span{color:#aeb6c4;}
.brand-palette{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 12px;}
.brand-sw{display:flex;align-items:center;gap:6px;font-size:12px;color:#aeb6c4;}
.brand-chip{width:16px;height:16px;border-radius:4px;display:inline-block;border:1px solid var(--line);}
@media(max-width:880px){
  .layout{flex-direction:column;gap:14px;padding:14px;}
  .controls{max-width:none;padding:16px;}
  .preview{order:-1;width:100%;}
  .canvas-wrap{align-items:center;}
  .canvas-wrap canvas{width:auto;max-width:100%;max-height:38vh;}
  .docs{max-height:50vh;}
}