.project-visual { background-position:center; background-size:cover; position:relative; min-height:220px; padding:18px; overflow:hidden; background-color:#31414a; background-image:linear-gradient(145deg,rgba(18,24,29,.08),rgba(9,11,15,.8)),linear-gradient(125deg,transparent 0 42%,rgba(229,197,137,.25) 42.2%,transparent 42.5%),linear-gradient(35deg,transparent 0 57%,rgba(255,255,255,.16) 57.2%,transparent 57.5%); }
.project-detail-modal { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:24px; background:rgba(5,7,10,.78); opacity:0; pointer-events:none; transition:opacity .22s ease; }
.project-detail-modal.is-open { opacity:1; pointer-events:auto; }
.project-detail-dialog { position:relative; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(320px,.75fr); width:min(1180px,100%); max-height:min(820px,calc(100vh - 48px)); overflow:auto; border:1px solid var(--line); background:#1b1c20; box-shadow:0 24px 80px rgba(0,0,0,.5); transform:translateY(12px); transition:transform .22s ease; }
.project-detail-modal.is-open .project-detail-dialog { transform:translateY(0); }
.project-detail-image { min-height:560px; background:#101216 center/contain no-repeat; }
.project-detail-copy { padding:42px 34px 32px; }
.project-detail-copy .section-kicker { margin-bottom:14px; }
.project-detail-copy h2 { margin:0 0 14px; color:#fff8ed; font:500 32px/1.2 Georgia,serif; }
.project-detail-copy p { margin:0 0 24px; color:#c2b8aa; font-size:13px; line-height:1.8; }
.detail-meta { display:grid; gap:12px; margin:0; padding:18px 0; border-top:1px solid rgba(225,189,120,.2); border-bottom:1px solid rgba(225,189,120,.2); }
.detail-ai-button { margin-top:22px; border:1px solid var(--gold); padding:11px 15px; color:#211e18; background:var(--gold); cursor:pointer; font-size:12px; font-weight:700; }
.detail-ai-button i { margin-right:7px; }
.project-image-editor { position:fixed; z-index:30; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px; background:rgba(8,10,13,.94); opacity:0; pointer-events:none; transition:opacity .2s ease; }
.project-image-editor.is-open { opacity:1; pointer-events:auto; }
.project-image-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; color:#fff; }
.project-image-toolbar button,.project-image-toolbar input { border:1px solid rgba(255,255,255,.35); padding:8px 11px; color:#fff; background:rgba(255,255,255,.12); cursor:pointer; }
.project-image-toolbar button:hover { color:#211e18; background:var(--gold); }
.project-image-toolbar button.active { color:#fff; background:#111317; border-color:#f0d397; box-shadow:inset 0 0 0 1px rgba(240,211,151,.35); }
.project-image-toolbar input { width:68px; }
.project-image-stage { width:min(1200px,94vw); height:min(78vh,800px); overflow:auto; display:grid; place-items:center; background:#17191d; border:1px solid rgba(225,189,120,.45); cursor:grab; }
.project-image-stage.is-drawing { cursor:crosshair; }
.project-image-stage, #project-edit-canvas { touch-action:none; }
.color-picker-label { display:inline-flex; align-items:center; gap:5px; }
.project-image-toolbar input[type="color"] { width:34px; height:28px; padding:2px; cursor:pointer; }
#project-edit-canvas { display:block; max-width:100%; max-height:100%; object-fit:contain; transform-origin:0 0; }
.project-zoom-level { min-width:48px; color:#f0d397; font-size:12px; text-align:center; }
.project-visual > i { position:relative; z-index:1; right:18px; top:18px; color:rgba(255,248,231,.72); cursor:pointer; }
@media (max-width:700px) { .project-image-editor { padding:12px; }.project-image-toolbar { gap:5px; }.project-image-toolbar button { padding:7px 8px; font-size:11px; }.project-image-stage { width:96vw; height:70vh; } }
.detail-meta div { display:flex; justify-content:space-between; gap:16px; color:#928a80; font-size:12px; }.detail-meta dd { margin:0; color:#f0d397; text-align:right; }.detail-close { position:absolute; z-index:1; top:13px; right:15px; width:34px; height:34px; border:1px solid rgba(225,189,120,.4); color:#f0d397; background:rgba(14,16,20,.72); cursor:pointer; font-size:18px; }
@media (max-width:700px) { .project-detail-modal { padding:12px; }.project-detail-dialog { display:block; max-height:calc(100vh - 24px); }.project-detail-image { min-height:300px; }.project-detail-copy { padding:25px 20px 24px; }.project-detail-copy h2 { font-size:26px; } }
.project-visual img { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; object-fit:cover; opacity:.9; }
.project-visual::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,rgba(8,12,16,0),rgba(8,12,16,.28)); pointer-events:none; }
.visual-residence { background-image:linear-gradient(180deg,rgba(8,12,16,0),rgba(8,12,16,.28)),url("/static/picture/example/example%20(1).jpg") !important; }
.visual-office { background-color:#4d4438; background-image:linear-gradient(180deg,rgba(8,12,16,0),rgba(8,12,16,.28)),url("/static/picture/example/example%20(10).jpg") !important; }
.visual-club { background-color:#385052; background-image:linear-gradient(180deg,rgba(8,12,16,0),rgba(8,12,16,.28)),url("/static/picture/example/example%20(11).jpg") !important; }
.visual-apartment { background-color:#554d42; background-image:linear-gradient(180deg,rgba(8,12,16,0),rgba(8,12,16,.28)),url("/static/picture/example/example%20(12).jpg") !important; }
.project-visual > span { position:relative; z-index:1; }
.showcase-content { padding:20px 22px; }
.showcase-content h2 { margin:0 0 8px; color:#fff8ef; font:500 21px Georgia,serif; line-height:1.2; }
.showcase-content > p { display:-webkit-box; margin:0 0 16px; overflow:hidden; color:#afa597; font-size:12px; line-height:1.65; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; min-height:42px; }
.card-topline { font-size:10px; display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.project-facts { display:flex; flex-wrap:wrap; gap:13px; margin:5px 0; padding:12px 0; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); color:#958d81; font-size:10px; }
.detail-button { margin-top:15px; border:0; padding:0; color:var(--gold); background:none; cursor:pointer; font-size:11px; }
.showcase-summary { display:grid; grid-template-columns:repeat(3,1fr) 1.7fr; gap:1px; margin-bottom:20px; border:1px solid var(--line); background:var(--line); }.summary-item,.summary-note { min-height:102px; padding:20px; background:linear-gradient(145deg,rgba(49,48,46,.94),rgba(24,25,30,.96)); }.summary-item span:last-child { display:block; color:var(--muted); font-size:11px; }.summary-number { display:block; margin-bottom:7px; color:#fff8ee; font:600 30px Georgia,serif; }.summary-number small { color:var(--muted); font:13px 'Segoe UI',sans-serif; }.summary-note { display:flex; flex-direction:column; justify-content:center; }.summary-note strong { color:#f4eadc; font:20px Georgia,serif; }.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.showcase-card { overflow:hidden; border:1px solid var(--line); background:linear-gradient(145deg,rgba(49,48,46,.94),rgba(24,25,30,.96)); box-shadow:0 14px 38px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.04); }.showcase-card.featured { grid-column:span 2; display:grid; grid-template-columns:1.05fr 1fr; }.featured .project-visual { min-height:300px; }.visual-label { position:relative; z-index:1; color:rgba(255,246,225,.72); font-size:10px; letter-spacing:2px; }.visual-title { position:absolute; right:20px; bottom:17px; left:20px; color:#fff8ea; font:500 27px Georgia,serif; text-shadow:0 2px 14px rgba(0,0,0,.6); }.category-tag { padding:4px 7px; color:#f0d391; background:rgba(225,189,120,.13); font-size:10px; }.completion-date { color:#90887d; font-size:10px; }.showcase-content p { min-height:42px; margin:0 0 16px; color:#afa597; font-size:12px; line-height:1.65; }.project-facts b { color:#eadfce; font-weight:500; }.detail-button i { margin-left:8px; }.detail-button:hover { color:#fff8ea; }
@media (max-width:900px) { .showcase-card.featured { display:block; }.table-head { display:none; } }
@media (max-width:560px) { .showcase-summary { grid-template-columns:repeat(3,1fr); }.summary-item { min-height:88px; padding:13px 10px; }.summary-number { font-size:23px; }.summary-note { grid-column:span 3; min-height:72px; padding:15px; }.project-grid { grid-template-columns:1fr; }.showcase-card.featured { grid-column:auto; }.project-visual,.featured .project-visual { min-height:190px; }.showcase-content { padding:17px; }.showcase-content p { min-height:0; } }


.comment-box { margin-top: 10px; padding-top: 10px; }
.comment-heading { margin-bottom: 6px; }
.comment-list .empty-comments { margin-bottom: 4px; }
.empty-comments { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.3; }
.comment-form { margin-top: 6px; }

.management-shell.showcase-shell { width: calc(100% - 32px); max-width: none; margin-top: 26px; margin-bottom: 42px; }

@media (min-width: 421px) {
	.comment-form { grid-template-columns: 110px minmax(0, 1fr) auto; }
	.comment-form textarea { grid-column: auto; grid-row: auto; }
	.comment-form button { grid-column: auto; grid-row: auto; min-height: 0; }
}

@media (min-width: 901px) {
	.showcase-card.featured { align-items: start; }
	.showcase-card .project-visual,
	.showcase-card.featured .project-visual { min-height: 440px; }
	.showcase-content { padding: 4px 10px 5px; }
	.card-topline { margin-bottom: 3px; font-size: 9px; line-height: 1.1; }
	.showcase-content h2 { margin: 3px 0; font-size: 16px; line-height: 1.15; }
	.showcase-content > p { display: -webkit-box; min-height: 0; margin-bottom: 4px; font-size: 10px; line-height: 1.25; -webkit-line-clamp: 2; line-clamp: 2; }
	.project-facts { gap: 9px; margin: 2px 0; padding: 3px 0; font-size: 9px; }
	.detail-button { padding: 2px 0; font-size: 10px; }
	.comment-box { margin-top: 3px; padding-top: 3px; }
	.comment-heading { height: 14px; margin-bottom: 2px; font-size: 9px; line-height: 1; }
	.comment-heading b { min-width: 14px; height: 14px; padding: 0 3px; font-size: 8px; }
	.comment-list:has(.empty-comments) { display: none; }
	.comment-box .comment-list { height: auto; max-height: 210px; overflow-y: auto; }
	.comment-list .empty-comments { margin-bottom: 0; font-size: 9px; line-height: 1.3; }
	.comment-form { grid-template-columns: 100px minmax(0, 1fr) auto; gap: 4px; margin-top: 2px; }
	.comment-form input, .comment-form textarea { padding: 5px 7px; font-size: 9px; }
	.comment-form textarea { min-height: 26px; line-height: 1.1; }
	.comment-form button { min-height: 0; padding: 5px 10px; font-size: 10px; line-height: 1.1; }
	.comment-item { gap: 6px; padding: 1px 0 !important; }
	.comment-text-row p { display: inline; margin: 0 !important; font-size: 10px; line-height: 1.3; }
	.reply-comment { display: inline-block; margin: 0 0 0 6px !important; padding: 0; height: 11px; line-height: 11px; font-size: 9px; vertical-align: baseline; }
	.comment-replies { margin-top: 1px; margin-left: 6px; padding-left: 8px; }
	.comment-replies .comment-item { padding-top: 2px; }
	.reply-form { gap: 4px; margin: 4px 0 2px; }
	.reply-form textarea { min-height: 26px; padding: 5px 7px; font-size: 9px; line-height: 1.2; }
	.reply-form button { padding: 4px 8px; font-size: 9px; }
}