:root{font-family:"Microsoft JhengHei",Arial,sans-serif;color:#302d42;background:#ecebf9}*{box-sizing:border-box}body{margin:0}a{color:#7659aa;text-decoration:none}a:hover{text-decoration:underline}.wrap{max-width:1100px;margin:auto;padding:0 18px}.top{background:#303c69;color:white;box-shadow:0 3px 14px #2222}.nav{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}.logo{font-size:24px;font-weight:bold;color:#fff}.top nav{display:flex;gap:15px;flex-wrap:wrap}.top nav a{color:#fff}main{padding-top:24px!important;min-height:80vh}.panel{background:#fff;border:1px solid #dedaf0;border-radius:12px;padding:25px;margin-bottom:20px;box-shadow:0 3px 10px #2522520c}.narrow{max-width:520px;margin:0 auto 25px}.panel h1,.panel h2{color:#7659aa;margin-top:0}label{display:block;font-weight:600;font-size:14px;margin:14px 0}input,textarea,select{font:inherit;width:100%;display:block;padding:11px;border-radius:7px;border:1px solid #ccc9dd;margin-top:7px;background:#fff;color:#29263c}textarea{resize:vertical;min-height:90px}input[type=color]{height:46px;padding:4px}.inline{display:flex;align-items:center;gap:8px}.inline input{width:auto;margin:0}.button,button{background:#8663ba;color:white;border:0;border-radius:8px;padding:10px 17px;font:inherit;cursor:pointer;display:inline-block}.button:hover,button:hover{background:#7152a2;text-decoration:none}.danger{background:#ba6274}.flash{padding:13px;border-radius:8px;background:#d7f3e5;margin-bottom:15px}.flash.error{background:#ffe1e1}.two{display:grid;grid-template-columns:2fr 1fr;gap:20px}.number{font-size:28px;color:#a15f98}.hero{background:linear-gradient(130deg,#454178,#a074be);color:#fff;text-align:center;border-radius:15px;padding:55px 20px;margin-bottom:22px}.hero h1{font-size:31px}.hero .search{display:flex;max-width:500px;margin:25px auto;gap:10px}.hero .search input{margin:0}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.mini-card{background:#f5f1fb;padding:18px;border:1px solid #e1d8ee;border-radius:10px;display:flex;flex-direction:column;gap:12px}.mini-card small{color:#555}.board{border-radius:15px;padding:19px;margin-bottom:30px}.theme-star{background:radial-gradient(circle at 20% 10%,#8c74bd,#333058 80%)}.theme-candy{background:linear-gradient(120deg,#fee1ed,#f8d3f3)}.theme-sky{background:linear-gradient(120deg,#d7f2ff,#a7d9ee)}.theme-midnight{background:linear-gradient(120deg,#131626,#36344e)}.board-banner{background:#ffffffd9;text-align:center;padding:26px 10px;border-radius:12px;margin-bottom:17px}.board-banner h1,.board h2{color:var(--accent)}.board-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:17px}.board .panel{background:#fffffff0}.profile{text-align:center}.avatar{border-radius:50%;height:90px;width:90px;margin:4px auto 15px;display:grid;place-items:center;font-size:47px;color:#bd71ab;background:#f9e6f4}.message{padding:16px 0;border-top:1px dashed #d6cce3}.message-head{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}.message p{overflow-wrap:anywhere}.muted{color:#7c7887;font-size:13px}.reply{display:flex;align-items:center;gap:8px}.reply input{margin:0}.reply button{white-space:nowrap}.message form+form{margin-top:8px}.message .danger{font-size:12px;padding:6px 10px}blockquote{background:#f1ebf8;border-left:4px solid #9e7eb8;padding:10px;margin:10px 0}.notice{background:#fff4db;padding:12px;border-radius:8px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%}td,th{border-bottom:1px solid #ddd;padding:12px;text-align:left}footer{text-align:center;background:#303c69;color:white;padding:20px;margin-top:25px}code{overflow-wrap:anywhere}@media(max-width:700px){.two,.board-grid{grid-template-columns:1fr}.hero .search{flex-direction:column}.hero h1{font-size:25px}.board{padding:10px}.panel{padding:17px}}

/* v1.1: compact nostalgic guestbook, not a modern social dashboard. */
:root{font-family:Verdana,"新細明體","PMingLiU",sans-serif;background:#fff;color:#333}
body{background:#fff;font-size:13px}
a{color:#2450af;text-decoration:underline}
.top{background:#e9ebf6;color:#273d7b;box-shadow:none;border-bottom:1px solid #b5bbce}
.nav{padding-top:7px;padding-bottom:7px;max-width:910px}
.logo{font-size:17px;color:#213c88}.top nav a{color:#2450af}
.wrap{max-width:910px}main{padding-top:12px!important;min-height:70vh}
.panel{border:1px solid #aaa;border-radius:0;padding:12px;box-shadow:none;margin-bottom:12px}
.panel h1,.panel h2{font-size:17px;color:#344b8d}
.board{padding:10px;border-radius:0;background-color:#eceaf8;border:1px solid #a5a5a5;margin-bottom:15px}
.board.has-background{background-image:var(--board-bg);background-repeat:repeat;background-position:top left;background-size:auto}
.board-banner{padding:14px 8px;border:1px solid #999;background:#ffffffed;border-radius:0;margin-bottom:10px}
.board-banner h1{font-size:20px;margin:0 0 8px}
.board-banner p{margin:5px}.board-banner small{font-size:12px;color:#555}
.board-grid{grid-template-columns:155px minmax(0,1fr);gap:10px}
.board .panel{background:#ffffffec;border:1px solid #999;padding:11px}
.board-grid .panel h2{font-size:16px;margin-bottom:8px}
.avatar{width:62px;height:62px;font-size:29px;border-radius:2px;border:1px solid #aaa;background:#fff9fc}
.profile h2{font-size:17px!important}
label{font-size:13px;margin:9px 0}
input,textarea,select{border-radius:0;padding:6px;margin-top:4px;font-size:13px}
textarea{min-height:65px}
.button,button{border:1px solid #6573ae;border-radius:2px;background:#e4e9ff;color:#1e376d;padding:6px 12px;font-size:13px}
.button:hover,button:hover{background:#ced9ff}
.message{padding:9px 0;border-top:1px dotted #999}
.message-head{background:#f3f4fb;padding:5px;border:1px solid #dadce8}
.message p{margin:9px 3px}
.message blockquote{background:#f3f4fb;border-left:3px solid #8f9ac8;padding:7px}
footer{background:#e9ebf6;color:#777;border-top:1px solid #b5bbce;padding:10px;font-size:12px;margin-top:12px}
.upload-panel{border:1px dotted #8e9bbb;padding:10px;margin:12px 0;background:#f8f9ff}
.upload-panel h2{font-size:15px}.bg-preview{display:block;max-width:210px;max-height:130px;object-fit:contain;border:1px solid #999}
@media(max-width:700px){.board-grid{grid-template-columns:1fr}.board{padding:5px}.board .panel{padding:9px}.nav{justify-content:center}}

/* v1.2.0: original 2000s narrow personal guestbook, no modern sidebar/cards */
body:has(.classic-board){background:#080808;color:#ff4796;font-family:"PMingLiU","新細明體",serif;font-size:13px}
body:has(.classic-board) .top{background:#bdbdbd;color:#111;border:0;box-shadow:none}
body:has(.classic-board) .nav{max-width:none;padding:5px 12px}
body:has(.classic-board) .logo{font-size:13px;color:#222;font-weight:normal}
body:has(.classic-board) .top nav a{color:#222;font-size:12px}
body:has(.classic-board) main.wrap{max-width:none;padding:0 12px!important;min-height:80vh}
body:has(.classic-board) footer{background:#080808;color:#777;border:0}
.classic-board{width:min(100%,760px);margin:0 auto;padding:20px 12px 60px;background:transparent;color:#ff4796;font:13px "PMingLiU","新細明體",serif;min-height:650px}
.classic-board.has-background{background-image:var(--board-bg);background-position:center top;background-repeat:repeat;background-size:auto}
.classic-name{text-align:center;margin:0 auto 18px;color:#ff0082;text-shadow:1px 1px #000}
.classic-name h1{font-size:26px;color:#ff0082;margin:7px 0 14px;line-height:1.5}
.classic-sub{font-size:13px;color:#ff0082}
.classic-card{display:flex;width:min(100%,450px);min-height:200px;margin:0 auto 14px;border:5px ridge #6666eb;background:#ffff92;color:#16449d}
.classic-card-avatar{flex:0 0 32%;background:linear-gradient(135deg,#ffe0f0,#fbe3ff 55%,#d7b7e6);display:grid;place-items:center;font-size:65px;color:#c571a9}
.classic-card-content{padding:6px 7px;flex:1;min-width:0;font-size:13px}
.classic-card-head{font-weight:bold;color:#389d00;font-size:18px;text-shadow:1px 1px #fff;margin-bottom:20px;border-bottom:1px dotted #f88}
.classic-card-head span{font:italic 12px Arial;color:#e77315}
.classic-card-content p{margin:15px 0;color:#e34869}
.classic-card-number{color:#43af23}
.classic-music{margin:10px auto;text-align:center;background:#ddd;color:#777;width:max-content;max-width:100%;padding:5px 12px;border-radius:3px}
.classic-music small{font-size:11px}
.classic-write{width:min(100%,730px);margin:18px auto 15px;background:#c9c9c9;color:#f00078;padding:12px 16px;border-radius:5px;font-size:13px}
.classic-write h2{font-size:16px;color:#f00078;margin:0 0 8px}
.classic-write label{font-size:13px;margin:5px 0;font-weight:normal}
.classic-write textarea,.classic-write input:not([type=checkbox]){border-radius:2px;background:#f4f4f4;padding:6px;color:#333}
.classic-write .inline{display:flex;gap:6px;align-items:center}
.classic-write button,.classic-reply button{background:#ededed;color:#d40068;border:1px solid #999;border-radius:3px;padding:5px 10px}
.classic-list-title{margin:10px auto;width:min(100%,730px);background:#bbb;padding:9px 14px;color:#ef0077;text-align:center;border-radius:5px;font-weight:bold}
.classic-message{display:flex;gap:14px;width:min(100%,730px);margin:12px auto;padding:15px;background:#c9c9c9;color:#ff007a;border-radius:5px;min-height:145px}
.classic-icon{flex:0 0 56px;width:56px;height:56px;border-radius:3px;background:#b9b9b9;display:grid;place-items:center;font-size:23px;font-weight:bold}
.classic-message-body{flex:1;min-width:0}.classic-message-head{display:block;background:transparent;border:0;padding:4px 0 8px;line-height:1.5}
.classic-message-head time{float:right;font-size:12px;color:#e10078;margin-left:5px}
.classic-number{color:#f10074}.classic-tag{background:#999;color:#222;border-radius:15px;font-size:11px;padding:3px 9px}
.classic-content{white-space:normal;overflow-wrap:anywhere;line-height:1.8;font-size:14px;padding:6px 0 10px;min-height:35px}
.classic-owner-reply{background:#e1e1e1;padding:10px 12px;color:#d56d9f;border-radius:3px;margin:5px 0}
.classic-owner-reply small{display:block;font-size:11px;margin-bottom:6px}
.classic-reply{display:flex;gap:5px;margin-top:10px}.classic-reply input{min-width:0;flex:1;margin:0;padding:6px;background:#ededed;color:#333}
.classic-hide{margin-top:4px}.classic-hide button{padding:3px 6px;background:#aaa;color:#7d2347;font-size:11px}
.classic-empty{color:#ff4796;text-align:center}
@media(max-width:600px){.classic-board{padding:12px 3px 40px}.classic-card{min-height:160px}.classic-card-head{font-size:15px}.classic-message{gap:7px;padding:10px}.classic-icon{flex-basis:36px;width:36px;height:36px;font-size:17px}.classic-message-head time{float:none;display:block}.classic-name h1{font-size:22px}}

/* v1.2.1 — User-selected text colour for every classic-board display label.
   Text input controls retain dark colours for contrast and readability. */
.classic-board,
.classic-board .classic-name,
.classic-board .classic-name h1,
.classic-board .classic-sub,
.classic-board .classic-card,
.classic-board .classic-card-content,
.classic-board .classic-card-head,
.classic-board .classic-card-head span,
.classic-board .classic-card-content p,
.classic-board .classic-card-number,
.classic-board .classic-music,
.classic-board .classic-music small,
.classic-board .classic-write,
.classic-board .classic-write h2,
.classic-board .classic-write label,
.classic-board .classic-post-as,
.classic-board .classic-list-title,
.classic-board .classic-message,
.classic-board .classic-message-head,
.classic-board .classic-message-head time,
.classic-board .classic-number,
.classic-board .classic-tag,
.classic-board .classic-content,
.classic-board .classic-owner-reply,
.classic-board .classic-owner-reply small,
.classic-board .classic-empty,
.classic-board .classic-icon,
.classic-board .classic-write button,
.classic-board .classic-reply button,
.classic-board .classic-hide button {
  color: var(--accent, #ff4796);
}
/* Keep editable input text and placeholders readable on the pale inputs. */
.classic-board input:not([type="checkbox"]),
.classic-board textarea {
  color: #222;
}
.classic-board input::placeholder,
.classic-board textarea::placeholder {
  color: #666;
}

/* v1.2.2 – immediate image upload previews, personal avatar & user-selected colours */
.avatar-editor-preview{display:flex;align-items:center;justify-content:center;width:120px;height:120px;border:1px solid #999;background:#f0e8ed;color:#b4639a;font-size:50px;margin:12px 0;overflow:hidden}
.avatar-editor-preview img{width:100%;height:100%;object-fit:cover;display:block}
.classic-card-avatar{overflow:hidden;min-width:0}
.classic-card-avatar .classic-avatar-image{width:100%;height:100%;object-fit:cover;display:block}
.minor-button{font-size:12px;padding:5px 9px}
.background-live-preview{height:135px;border:1px dashed #888;background-color:#222;background-position:center top;background-repeat:repeat;background-size:auto;margin:8px 0}
.style-live-preview{border:2px ridge #888;padding:14px;margin:10px 0 14px;min-height:90px;text-align:center;background:#171717;color:var(--accent,#ff4796)}
.style-live-preview.theme-star{background:radial-gradient(circle,#403762,#161126)}
.style-live-preview.theme-candy{background:linear-gradient(120deg,#ffe6f1,#ffdbec)}
.style-live-preview.theme-sky{background:linear-gradient(120deg,#ddf6ff,#98d8ec)}
.style-live-preview.theme-midnight{background:#0c1021}
.style-live-preview .live-preview-header,.style-live-preview .live-preview-message{color:var(--accent,#ff4796)!important}
.style-live-preview .live-preview-header{font-size:17px;margin:5px}
.live-style-status{font-size:12px;color:#3c4772;background:#f1f3fb;padding:6px 8px;border:1px solid #b1bed5}
.live-style-status.error{color:#ad1126;background:#fff0f0}

/* v1.2.3: viewport fixed, proportional full-screen background (including animated GIF). */
body:has(.classic-board.has-background) {background-repeat:no-repeat!important;background-position:center center!important;background-size:cover!important;background-attachment:fixed!important}
.classic-board.has-background {background-image:none!important}
.background-live-preview {background-repeat:no-repeat!important;background-position:center center!important;background-size:cover!important}
/* Confirm-before-save avatar editor. CSS geometry retains the original GIF frames. */
.avatar-editor-preview {width:220px;height:220px;max-width:100%;position:relative;overflow:hidden}
.avatar-editor-preview img {width:100%;height:100%;object-fit:cover;object-position:var(--avatar-x,50%) var(--avatar-y,50%);transform:scale(var(--avatar-zoom,1));transform-origin:center center}
.avatar-adjust-controls {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:10px 0}
.avatar-adjust-controls label {display:block;font-size:13px}
.avatar-adjust-controls input[type=range] {display:block;width:100%;margin:5px 0}
.avatar-actions {display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.classic-card-avatar {flex:0 0 min(var(--avatar-width,144px),42%);width:min(var(--avatar-width,144px),42%);position:relative;overflow:hidden}
.classic-card-avatar .classic-avatar-image {width:100%;height:100%;object-fit:cover;object-position:var(--avatar-x,50%) var(--avatar-y,50%);transform:scale(var(--avatar-zoom,1));transform-origin:center center}
@media(max-width:540px){.avatar-adjust-controls{grid-template-columns:1fr}}

/* v1.2.4 — image frame dimensions must match the public page. */
.classic-card-avatar{flex:0 0 144px!important;width:144px!important;height:144px!important;min-width:144px!important;align-self:flex-start;overflow:hidden}
.classic-card-avatar .classic-avatar-image,.avatar-editor-preview img,.db-avatar-crop img{width:100%;height:100%;object-fit:cover;object-position:var(--avatar-x,50%) var(--avatar-y,50%);transform:scale(var(--avatar-zoom,1));transform-origin:center;display:block}
.avatar-editor-preview{width:144px!important;height:144px!important;max-width:none!important}
.background-live-preview{height:auto!important;aspect-ratio:16 / 9;background-color:#000!important;background-position:center center!important;background-repeat:no-repeat!important;background-size:contain;margin:12px 0}
body:has(.classic-board.has-background){background-color:#000!important;background-repeat:no-repeat!important;background-position:center center!important;background-attachment:fixed!important;background-size:var(--db-background-fit,contain)!important}
.db-editor-overlay[hidden]{display:none!important}
.db-editor-overlay{position:fixed;inset:0;background:rgba(0,0,0,.74);z-index:10000;display:grid;place-items:center;padding:16px;overflow:auto}
.db-editor-dialog{background:#fff;color:#222;width:min(100%,480px);max-height:94vh;overflow:auto;padding:20px;border:3px solid #7362aa;box-shadow:0 12px 45px #0008}
.db-editor-dialog h2{margin:0 0 8px;color:#4b3b79;font-size:20px}
.db-editor-dialog p{font-size:13px;line-height:1.6}
.db-avatar-stage{background:#d9d9d9;padding:26px;display:grid;place-items:center;margin:14px 0}
.db-avatar-crop{width:144px;height:144px;max-width:none;overflow:hidden;background:#fff;border:2px solid #fff;box-sizing:border-box;cursor:grab;touch-action:none}
.db-avatar-crop:active{cursor:grabbing}
.db-editor-dialog input[type=range]{width:100%}
.db-editor-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.db-background-dialog{width:min(100%,820px)}
.db-background-frame{width:100%;aspect-ratio:16/9;border:2px solid #aaa;background-color:#000;background-position:center;background-repeat:no-repeat;background-size:contain}
.db-background-dialog label{display:block;margin:10px 0}
/* Keep 144px on mobile too: editor and displayed picture remain identical. */

/* v1.2.6 — Remove the visible footer and white strip underneath classic boards.
   The document root and the full viewport remain black even with short content. */
html:has(.classic-board){background-color:#080808;min-height:100%}
body:has(.classic-board){min-height:100vh;background-color:#080808}
body:has(.classic-board) main.wrap{min-height:0}