/* Layout refresh: aligned information, no activity column, no hidden titles. */
:root{--line:#e5eae7;--muted:#728078;--soft:#f6f8f7}
body{background:#f6f8f7}
.app{grid-template-columns:220px minmax(0,1fr)}
.sidebar{background:#fff;padding:28px 16px 20px;gap:4px}
.brand{font-size:20px;letter-spacing:-.5px;padding-bottom:24px}
.nav button,.tag-filter{border-radius:8px;height:42px}
.side-title{font-size:12px;letter-spacing:1px;margin-top:28px}
.tag-filter .count{margin-left:auto;font-size:12px;color:var(--muted)}
.tag-dot{background:#c1d6c9;width:6px;height:6px}
.side-actions{padding-top:18px;border-top:1px solid var(--line)}
.topbar{height:84px;padding:20px 32px;background:#fff;backdrop-filter:none;gap:10px}
.search{max-width:none;height:44px;background:var(--soft);border-radius:8px}
.search input{font-size:14px}
.button{border-radius:8px;font-size:14px;font-weight:600}
.content{padding:30px 32px;max-width:1600px}
.heading{align-items:center;margin-bottom:24px}
.heading h1{font-size:26px;letter-spacing:-.5px}
.heading p{margin-top:8px;font-size:13px}
.controls select{font-size:13px}
.segmented button{width:44px;font-size:12px}
.segmented button i,.segmented button svg{display:none}
.segmented [data-view="list"]::after{content:'列表'}
.segmented [data-view="grid"]::after{content:'卡片'}
.collection{gap:0;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.collection:not(.grid-view) .demo{grid-template-columns:minmax(0,1fr) 112px 200px}
.demo{gap:24px;min-height:82px;padding:20px 24px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:#fff;box-shadow:none}
.demo:last-child{border-bottom:0}
.demo:hover{background:#fafcfb;box-shadow:none}
.demo-title{min-width:0}
.title-line{display:grid;grid-template-columns:160px minmax(0,1fr);gap:20px;align-items:center}
.title-link{font-size:20px;line-height:1.5;max-width:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;font-weight:650}
.url{display:block;margin:0;min-width:0;font-size:16px;line-height:1.65;color:var(--muted);text-decoration:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.url:hover{color:var(--accent);text-decoration:underline}
.demo-note{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.tag-list{display:flex;min-width:0;gap:6px;align-items:center;flex-wrap:wrap}
.tag{padding:5px 10px;font-size:15px;line-height:1.5;background:#eff5f1;color:#567262}
.actions{display:flex;justify-content:flex-end;gap:4px;align-items:center}
.actions .icon-button{display:inline-flex;align-items:center;justify-content:center;height:34px;border:0;background:transparent;border-radius:6px;color:#728078}
.actions .action-text{padding:0 9px!important;font-size:14px!important;white-space:nowrap}
.actions .icon-button:hover{background:#edf3ef;color:var(--accent)}
.actions .delete{color:#b97b7b!important}
.actions .delete:hover{background:#fff0f0;color:var(--danger)!important}
.actions .favorite{width:32px;font-size:23px}
.actions .favorite.on{color:#d97706}
.grid-view{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;border:0;background:transparent;overflow:visible}
.grid-view .demo{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:24px;border:1px solid var(--line);border-radius:12px;min-width:0}
.grid-view .title-line{grid-template-columns:1fr;gap:12px}
.grid-view .title-link{font-size:20px}
.grid-view .tag-list{min-height:24px}
.grid-view .actions{margin-top:auto;border-top:1px solid var(--line);padding-top:12px}
.empty{border-radius:12px}
button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:1300px) and (min-width:901px){
  .collection:not(.grid-view) .demo{grid-template-columns:minmax(0,1fr) 100px 188px;gap:16px;padding:18px}
  .title-line{grid-template-columns:125px minmax(0,1fr);gap:16px}
  .topbar{padding:16px 24px}.content{padding:24px}
}
@media(max-width:900px){
  .app{display:block}.sidebar{height:auto;padding:16px 20px}.brand{padding:0}
  .topbar{height:auto;padding:14px 20px;flex-wrap:wrap}.search{order:3;flex-basis:100%}
  .content{padding:24px 20px}.collection:not(.grid-view) .demo{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:18px}
  .title-line{grid-template-columns:minmax(95px,125px) minmax(0,1fr);gap:12px}
  .collection:not(.grid-view) .demo-title{grid-column:1/-1}
  .demo .tag-list{display:flex}.actions .edit,.actions .copy{display:inline-flex}
  .grid-view{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}
@media(max-width:540px){
  .topbar .button span{display:inline}.topbar{gap:8px}.topbar .button{font-size:13px}
  .heading{display:block}.heading h1{font-size:23px}.controls{margin-top:18px}
  .title-line{grid-template-columns:100px minmax(0,1fr);gap:12px}
  .content{padding:20px 14px}.collection:not(.grid-view) .demo{padding:16px}
  .grid-view{grid-template-columns:minmax(0,1fr)}
}
/* Limit excessive whitespace on wide screens while retaining full URLs. */
@media(min-width:1301px){
  .collection:not(.grid-view) .demo{grid-template-columns:minmax(0,1fr) 126px 220px;gap:24px}
  .title-line{grid-template-columns:170px minmax(0,1fr);gap:20px}
}