/* The desktop and workshop share quiet, compact editing controls. */
.studio-overlay { position:fixed; inset:0; z-index:18000; background:#e9ece8; color:#2d3935; font:14px/1.5 system-ui,sans-serif; padding-top:max(env(safe-area-inset-top,0px),var(--sat,0px)); box-sizing:border-box; }
.widget-workshop { z-index:18100; }
.studio-shell { height:100%; max-width:760px; margin:auto; display:flex; flex-direction:column; background:#f7f8f5; overflow:hidden; }
.studio-overlay * { box-sizing:border-box; }
.studio-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid #dce1db; }
.studio-header strong { font-size:18px; font-weight:650; letter-spacing:.02em; }
.studio-header small { display:block; color:#718076; font-size:11px; margin-top:2px; }
.studio-overlay button,.studio-file { border:1px solid #d4dcd4; background:#fff; color:#35483d; border-radius:9px; min-height:38px; padding:7px 12px; font:inherit; cursor:pointer; }
.studio-overlay button:disabled { opacity:.4; cursor:default; }
.studio-overlay button:focus-visible,.studio-overlay input:focus-visible,.studio-overlay textarea:focus-visible { outline:2px solid #55746a; outline-offset:2px; }
.studio-header button:last-child { background:#456454; border-color:#456454; color:#fff; }
.studio-tools { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:10px 14px; }
.studio-tools label { display:flex; align-items:center; gap:6px; }
.studio-tools input[type=number] { width:48px; }
.studio-tools select { max-width:100px; }
.studio-pages { display:flex; gap:7px; padding:0 14px 12px; overflow:auto; flex-shrink:0; }
.studio-pages button { white-space:nowrap; background:transparent; border-color:transparent; }
.studio-pages .active { background:#dee7df; color:#274433; }
.studio-shell footer { padding:10px 16px max(12px,env(safe-area-inset-bottom,0px)); color:#69756e; font-size:12px; border-top:1px solid #dce1db; }
.desktop-studio-scroll { flex:1; min-height:0; overflow:auto; padding:10px 20px 25px; background:#e9ece8; }
.desktop-studio-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; position:relative; --studio-cell:calc((min(100vw,760px) - 70px)/4); grid-auto-rows:var(--studio-cell); min-height:calc(var(--studio-rows)*var(--studio-cell) + (var(--studio-rows) - 1)*10px); align-content:start; }
.studio-card { position:relative; min-width:0; height:auto!important; width:auto!important; border:1px solid #d2d9d1; border-radius:14px; touch-action:none; cursor:grab; overflow:hidden; background:#fff; padding:0!important; }
.studio-card.selected { outline:2px solid #507860; outline-offset:2px; }
.studio-card-preview { width:100%; height:100%; pointer-events:none; overflow:hidden; }
.studio-card-grip { position:absolute; top:4px; right:5px; padding:1px 5px; border-radius:4px; font-size:10px; background:rgba(255,255,255,.9); color:#5a6d60; pointer-events:none; }
.studio-selection { min-height:44px; padding:8px 12px; font-size:12px; border-top:1px solid #dce1db; }
.studio-selection .studio-tools { padding:0; }
.studio-overlay input,.studio-overlay select,.studio-overlay textarea { min-height:36px; max-width:100%; border:1px solid #d1dbd2; background:#fff; color:#2d3935; border-radius:7px; padding:6px; font:inherit; }
.studio-overlay input[type=range] { padding:0; accent-color:#587b62; }
.studio-overlay input[type=color] { width:100%; padding:3px; }
.workshop-main { flex:1; min-height:0; overflow:auto; }
.workshop-artboard { padding:24px; background-color:#e6e8e3; background-image:radial-gradient(#c9d0c7 .7px,transparent .7px); background-size:12px 12px; }
.widget-canvas { width:100%; max-width:400px; margin:auto; box-shadow:0 8px 25px #35483d14; touch-action:none; background:repeating-conic-gradient(#fff 0% 25%,#ebeeea 0% 50%) 50% / 16px 16px; }
.widget-canvas svg { display:block; overflow:hidden; }
.workshop-controls { padding:10px 18px 20px; }
.workshop-controls h3 { font-size:14px; margin:16px 0 10px; }
.workshop-controls p { color:#6c786f; font-size:12px; }
.workshop-controls label { display:flex; flex-direction:column; gap:5px; font-size:12px; color:#526357; }
.workshop-controls textarea { resize:vertical; width:100%; }
.studio-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin-top:12px; }
.studio-fields input { width:100%; }
.element-tools { padding:0 0 12px; border-bottom:1px solid #dce1db; }
.element-tools .studio-file { font-size:14px; color:#35483d; display:inline-flex; align-items:center; }
.studio-library { position:absolute; inset:0; z-index:3; overflow:auto; background:#f7f8f5; padding:20px; }
.studio-library header { display:flex; justify-content:space-between; align-items:center; margin:8px 0 20px; }
.studio-library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.studio-library-grid>div>button { width:100%; margin-bottom:6px; }
.studio-config-fields { display:grid; gap:18px; margin-bottom:24px; }
.studio-config-fields label { display:grid; gap:6px; }
.widget-layers { padding:12px 0 0; }
.widget-layers button { font-size:11px; min-height:30px; padding:4px 8px; }
.widget-thumb { height:150px; width:100%; }
.diy-widget { width:100%; height:100%; overflow:hidden; }
.diy-widget svg { display:block; }
@media(min-width:680px) { .workshop-main { display:grid; grid-template-columns:minmax(0,1fr) 300px; } .workshop-artboard { align-self:start; position:sticky; top:0; } }
@media(max-height:600px) { .studio-header {padding:6px 12px;} .studio-header small {display:none;} .studio-tools {padding-top:6px;padding-bottom:6px;} .workshop-artboard {padding:12px 24px;} }
@media(prefers-reduced-motion:reduce) { .studio-overlay * {animation:none!important;transition:none!important;} }

/* Character phone: monochrome desktop, distinct app accents, personal wallpaper. */
.cp-phone-frame #cpHomeView { background-size:cover; background-repeat:no-repeat; padding:0 18px 20px; }
.cp-phone-frame .cp-time-card { background:transparent; border:0; box-shadow:none; padding:28px 6px 14px; text-align:left; }
.cp-phone-frame .cp-time-time { font-size:58px; font-weight:300; letter-spacing:-3px; line-height:1.1; }
.cp-phone-frame .cp-time-date { font-size:12px; margin-top:9px; letter-spacing:1px; }
.cp-phone-frame .cp-app-grid { gap:24px 16px; width:100%; padding:10px 0; }
.cp-phone-frame .cp-app-icon-bg { width:58px; height:58px; border-radius:17px; background:var(--cp-surface,#fff); border:1px solid var(--cp-line,#ddd); box-shadow:0 3px 7px #00000007; }
.cp-phone-frame .cp-app-icon-label { font-size:12px; margin-top:8px; font-weight:500; }
.cp-phone-frame .cp-app-icon[data-app=wechat] .cp-app-icon-bg { color:#45785f; }
.cp-phone-frame .cp-app-icon[data-app=diary] .cp-app-icon-bg { color:#8b7268; }
.cp-phone-frame .cp-app-icon[data-app=reading] .cp-app-icon-bg { color:#69798b; }
.cp-phone-frame .cp-app-icon[data-app=schedule] .cp-app-icon-bg { color:#98706f; }
.cp-phone-frame .cp-wallpaper-button { font:inherit; font-size:12px; border:1px solid var(--cp-line,#ddd); border-radius:14px; padding:5px 12px; background:var(--cp-surface,#fff); color:var(--cp-text,#222); }
.cp-phone-frame .cp-has-wallpaper .cp-time-card,.cp-phone-frame .cp-has-wallpaper .cp-app-icon-label,.cp-phone-frame .cp-has-wallpaper .cp-owner-label { color:#fff; text-shadow:0 1px 5px #0008; }
.cp-phone-frame .cp-has-wallpaper .cp-time-date { color:#fff; }
.cp-phone-frame .cp-has-wallpaper .cp-app-icon-bg { background:rgba(255,255,255,.92); color:#343b43; }
.cp-phone-frame #cpAppView .cp-header { border-bottom:1px solid var(--cp-line,#ddd); min-height:54px; }
.cp-phone-frame #cpAppView .pc-app-content { padding:18px; }
.cp-phone-frame #cpAppView .cp-chat-item { padding-top:15px; padding-bottom:15px; }
.cp-phone-frame #cpAppView .pc-note-card,.cp-phone-frame #cpAppView .pc-diary-card { border-radius:14px; box-shadow:none; line-height:1.75; }
.cp-phone-frame #cpAppView .pa-screen { --pa-ink:var(--cp-text,#24282c); --pa-ink2:var(--cp-muted,#78808a); background:var(--cp-bg,#f4f5f6); padding:20px 16px 32px; }
.cp-phone-frame #cpAppView .pa-sec { font-size:12px; font-weight:600; letter-spacing:.08em; margin:22px 2px 12px; }
.cp-phone-frame #cpAppView .pa-sec:first-child { margin-top:0; }
.cp-phone-frame #cpAppView .pa-card { border:1px solid var(--cp-line,#e1e3e5); background:var(--cp-surface,#fff); border-radius:15px; box-shadow:none; overflow:hidden; }
.cp-phone-frame #cpAppView .pa-item { min-height:52px; line-height:1.65; }
.cp-phone-frame #cpAppView .pc-note-detail { padding:24px 22px; }
.cp-phone-frame #cpAppView .pc-note-detail-title { font-size:23px; line-height:1.5; margin:10px 0 20px; }
.cp-phone-frame #cpAppView .pc-note-detail-content { font-size:15px; line-height:1.9; }

.cp-phone-frame .cp-has-wallpaper .cp-time-time { color:#fff; text-shadow:0 1px 5px #0005; }
.cp-phone-frame .cp-has-wallpaper .cp-gen-all-hint { color:#fff; text-shadow:0 1px 4px #0008; }

/* Workshop v2: open cream surfaces, typography and original geometric templates. */
.widget-workshop { --ww-ink:#463e37; --ww-muted:#8b8177; --ww-line:#e9e3db; --ww-paper:#fffcf8; background:#f1ede6; color:var(--ww-ink); }
.widget-workshop .workshop-shell { max-width:1000px; background:var(--ww-paper); }
.widget-workshop .studio-header { flex-shrink:0; padding:10px 20px; min-height:64px; border-color:var(--ww-line); }
.widget-workshop .studio-header strong { font-size:19px; letter-spacing:.12em; font-weight:550; }
.widget-workshop button { color:var(--ww-ink); border-color:var(--ww-line); min-height:44px; }
.widget-workshop button:focus-visible,.widget-workshop input:focus-visible,.widget-workshop select:focus-visible,.widget-workshop textarea:focus-visible { outline:2px solid #977962; outline-offset:2px; }
.widget-workshop .studio-header .ww-back { width:44px; padding:0; font-size:34px; line-height:1; background:none; border:0; text-align:left; }
.widget-workshop .studio-header button:last-child { min-width:66px; min-height:38px; background:#51453c; border:0; border-radius:22px; color:#fffdf8; }
.ww-topbar { display:flex; align-items:center; gap:4px; padding:0 18px; flex-shrink:0; height:44px; }
.ww-topbar>span { flex:1; }
.ww-topbar button { border:0; background:none; padding:0 10px; font-size:26px; }
.widget-workshop .ww-text-button { border:0; background:none; padding:0 4px; font-size:12px; color:var(--ww-muted); }
.ww-topbar .ww-text-button { font-size:13px; color:var(--ww-ink); }
.widget-workshop .workshop-main { display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.ww-preview { flex-shrink:0; background:radial-gradient(#ddd5ca .65px,transparent .65px) 0 0 / 16px 16px,#f7f4ee; padding:10px 16px 8px; }
.widget-workshop .workshop-artboard { height:clamp(156px,29vh,280px); background:none; padding:6px 0; display:flex; justify-content:center; align-items:center; position:static; }
.widget-workshop .widget-canvas { margin:0; background:transparent; box-shadow:none; filter:drop-shadow(0 5px 9px #5447380d); }
.widget-workshop .ww-size-caption { display:flex; align-items:center; justify-content:center; gap:14px; margin:auto; padding:0 8px; border:0; background:none; min-height:30px; font-size:11px; color:#8b8177; }
.ww-size-caption span { font-size:10px; color:#9c9186; }
.widget-workshop .workshop-controls { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; padding:0; background:var(--ww-paper); border-radius:22px 22px 0 0; margin-top:-1px; }
.ww-tabs { display:flex; flex-shrink:0; border-bottom:1px solid var(--ww-line); padding:0 12px; }
.ww-tabs button { flex:1; border:0; background:none; border-radius:0; color:#a1988e; position:relative; min-height:48px; }
.ww-tabs button[aria-current=page] { color:var(--ww-ink); font-weight:600; }
.ww-tabs button[aria-current=page]::after { content:''; position:absolute; bottom:0; width:24px; height:3px; border-radius:2px; background:#695548; left:calc(50% - 12px); }
.ww-drawer-scroll { flex:1; min-height:0; overflow:auto; padding:16px 22px 24px; overscroll-behavior:contain; }
.ww-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.widget-workshop .ww-panel-heading h3 { margin:0; font-size:16px; font-weight:550; }
.ww-panel-heading>span { color:var(--ww-muted); font-size:11px; }
.widget-workshop .ww-hint { font-size:11px; line-height:1.65; color:var(--ww-muted); margin:4px 0 16px; }
.ww-categories { display:flex; gap:4px; margin:10px 0 14px; }
.ww-categories button { flex:1; padding:2px 6px; border:0; background:transparent; border-radius:6px; min-height:30px; font-size:11px; color:var(--ww-muted); }
.ww-categories button[aria-pressed=true] { color:#615045; background:#eee7dc; }
.ww-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; }
.widget-workshop .ww-template { display:block; width:100%; border:0; padding:0; background:none; text-align:left; border-radius:0; }
.ww-template-preview { display:flex; align-items:center; justify-content:center; height:auto; aspect-ratio:1; padding:10px; background:#f3f0ea; border-radius:12px; overflow:hidden; }
.ww-template-preview svg { display:block; max-height:100%; filter:drop-shadow(0 3px 4px #5447380b); }
.ww-template strong { display:block; margin:9px 0 3px; font-size:12px; font-weight:550; }
.ww-template small { display:block; color:#978d82; font-size:10px; line-height:1.5; }
.widget-workshop .ww-footer { flex-shrink:0; padding:10px 20px max(10px,env(safe-area-inset-bottom,0px)); background:var(--ww-paper); border-top:1px solid var(--ww-line); }
.widget-workshop .ww-use { width:100%; min-height:46px; background:#51453c; border:0; color:#fffdf8; border-radius:13px; font-size:14px; letter-spacing:.04em; }
.ww-footer [data-status] { text-align:center; font-size:10px; color:var(--ww-muted); padding-top:5px; min-height:20px; }
.ww-element-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 6px; margin:20px 0; }
.widget-workshop .ww-add-element { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:9px; min-height:80px; background:#f5f1eb; border:0; border-radius:12px; font-size:11px; color:#726256; cursor:pointer; }
.ww-add-element>span { font-size:25px; font-family:Georgia,serif; line-height:1; }
.widget-workshop .ww-layer { display:flex; align-items:center; gap:12px; text-align:left; width:100%; padding:12px 0; background:none; border:0; border-bottom:1px solid var(--ww-line); border-radius:0; }
.ww-layer>span:nth-child(2) { flex:1; min-width:0; }
.ww-layer strong { display:block; font-size:13px; font-weight:500; }
.ww-layer small { display:block; font-size:10px; color:var(--ww-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; }
.ww-layer-swatch { display:grid; place-items:center; width:38px; height:38px; background:#f1ebe2; border-radius:8px; color:#8a7666; }
.widget-workshop input,.widget-workshop select,.widget-workshop textarea { background:#fffdfa; color:var(--ww-ink); border-color:var(--ww-line); min-height:40px; border-radius:8px; }
.widget-workshop input[type=range] { accent-color:#8f7561; }
.widget-workshop .workshop-controls label { color:#897a6c; font-size:11px; margin-top:8px; }
.widget-workshop h4 { font-size:12px; font-weight:500; margin:20px 0 10px; }
.ww-shapes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.widget-workshop .ww-shapes button { display:flex; align-items:center; flex-direction:column; gap:7px; padding:10px 4px; border:1px solid transparent; background:#f4f0e9; border-radius:10px; font-size:10px; color:#ad9c8b; }
.ww-shapes svg { width:28px; height:28px; }
.widget-workshop .ww-shapes button[aria-pressed=true] { border-color:#a99077; color:#79604d; background:#ede4d8; }
.ww-advanced { margin-top:20px; border-top:1px solid var(--ww-line); padding-top:14px; }
.ww-advanced summary { font-size:12px; color:#86715f; cursor:pointer; min-height:30px; }
.ww-element-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; }
.widget-workshop .ww-element-actions button { flex:1 0 27%; font-size:11px; min-height:38px; background:#f6f1ea; border:0; }
.widget-workshop .ww-danger { color:#ab6c62; }
.widget-workshop .ww-upload { display:block; text-align:center; padding:11px; margin:14px 0; border:1px dashed #bfaf9f; border-radius:10px; cursor:pointer; background:#f8f3ec; }
.widget-workshop .ww-library { background:var(--ww-paper); padding-top:max(20px,env(safe-area-inset-top,0px)); }
.ww-library h3 { font-size:20px; margin:0; font-weight:550; }.ww-library p { font-size:12px; color:var(--ww-muted); }
.widget-workshop .ww-delete-work { border:0; padding:0; background:none; font-size:10px; color:#a3897b; min-height:32px; }
.desktop-card.card-type-diy-widget,.desktop-card.studio-diy-card { background:transparent!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; padding:0!important; border-radius:0!important; }
.desktop-card.card-type-diy-widget::before,.desktop-card.card-type-diy-widget::after { display:none!important; }
@media(min-width:720px) {
  .widget-workshop .workshop-main { display:grid; grid-template-columns:minmax(0,1fr) 360px; }
  .ww-preview { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:24px; }
  .widget-workshop .workshop-artboard { height:min(54vh,470px); }
  .widget-workshop .workshop-controls { margin:0; border-radius:0; border-left:1px solid var(--ww-line); }
  .widget-workshop .ww-footer { display:flex; flex-direction:row-reverse; align-items:center; gap:20px; }
  .widget-workshop .ww-use { width:300px; }.ww-footer [data-status] { flex:1; text-align:left; }
}
@media(max-height:620px) and (max-width:719px) {
  .widget-workshop .studio-header { min-height:48px; padding:4px 16px; }.ww-topbar { height:34px; }
  .widget-workshop .workshop-artboard { height:130px; }.ww-preview { padding-top:3px; padding-bottom:0; }
  .ww-tabs button { min-height:40px; }.widget-workshop .ww-footer { padding-top:6px; }.widget-workshop .ww-use { min-height:40px; }
}