.container { max-width: 1500px; padding: 0 32px; }
.top-bar-inner { max-width: 1500px; padding-left: 32px; padding-right: 32px; }
.hero { padding: calc(36px * var(--ui-scale, 1)) 0; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: calc(32px * var(--ui-scale, 1)); align-items: center; border-bottom:1px solid var(--border); margin-bottom:calc(32px * var(--ui-scale, 1)); }
.hero-left { display: flex; gap: calc(20px * var(--ui-scale, 1)); align-items: center; min-width:0; }
.hero .logo { color: var(--text); width: calc(64px * var(--ui-scale, 1)); height: calc(64px * var(--ui-scale, 1)); display: grid; place-items: center; flex: none; }
.hero .logo svg { width: calc(56px * var(--ui-scale, 1)); height: calc(56px * var(--ui-scale, 1)); }
.hero h1 { font-size: clamp(calc(34px * var(--ui-scale, 1)),calc(3vw * var(--ui-scale, 1)),calc(44px * var(--ui-scale, 1))); letter-spacing: -.045em; line-height: 1.15; font-weight: 650; }
.hero-center { grid-column:2;grid-row:1;text-align:center; }
.hero-clock { font-variant-numeric: tabular-nums; font-size: calc(48px * var(--ui-scale, 1)); font-weight: 500; letter-spacing: -.02em; min-width: 8ch; }
.hero-right { grid-column:3;grid-row:1;justify-self:end;text-align:right;max-width:calc(440px * var(--ui-scale, 1));min-width:0;overflow-wrap:anywhere; }
.hero-quote { font-size: calc(14px * var(--ui-scale, 1)); line-height:1.6; color: var(--text-secondary); }
.section { padding: 0 0 calc(40px * var(--ui-scale, 1)); }
.grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: calc(16px * var(--ui-scale, 1)); }
.card { position: relative; min-width: 0; min-height: calc(156px * var(--ui-scale, 1)); padding: calc(18px * var(--ui-scale, 1)); border: 1px solid var(--border); border-radius: calc(18px * var(--ui-scale, 1)); background: var(--card-bg); text-decoration: none; color: var(--text); transition: transform 160ms ease,border-color 160ms ease,background-color 160ms ease; }
.card-icon { width: calc(32px * var(--ui-scale, 1)); height: calc(32px * var(--ui-scale, 1)); margin-bottom: calc(12px * var(--ui-scale, 1)); color: var(--accent); display: flex; align-items: center; }
.card-icon svg { width: calc(26px * var(--ui-scale, 1)); height: calc(26px * var(--ui-scale, 1)); }
.card-title { font-size: calc(17px * var(--ui-scale, 1)); line-height: 1.4; font-weight: 600; letter-spacing: -.02em; margin-bottom: calc(8px * var(--ui-scale, 1)); }
.card-desc { font-size: calc(14px * var(--ui-scale, 1)); line-height: 1.6; color: var(--text-secondary); }
.card-arrow { position: absolute; right: calc(16px * var(--ui-scale, 1)); top: calc(20px * var(--ui-scale, 1)); color: var(--text-tertiary); }
.card:active { transform: translateY(0); background: var(--surface-raised); }
@media (hover: hover) { .card:hover { transform: translateY(-2px); border-color: var(--border-strong); background: var(--surface-raised); } }
.bm-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: calc(12px * var(--ui-scale, 1)); }
.bm-card { display: flex; align-items: center; gap: calc(12px * var(--ui-scale, 1)); background: var(--card-bg); border: 1px solid var(--border); padding: calc(16px * var(--ui-scale, 1)); border-radius: calc(14px * var(--ui-scale, 1)); min-width: 0; }
.bm-icon { width: calc(36px * var(--ui-scale, 1)); height: calc(36px * var(--ui-scale, 1)); display: grid; place-items: center; flex: none; background: var(--surface-raised); border-radius: calc(10px * var(--ui-scale, 1)); }
.bm-body { flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.bm-title { display: block; font-size: calc(15px * var(--ui-scale, 1)); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-domain { display: block; font-size: calc(13px * var(--ui-scale, 1)); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-actions { display: flex; gap: calc(4px * var(--ui-scale, 1)); }
.link-act { min-width: calc(40px * var(--ui-scale, 1)); min-height: calc(40px * var(--ui-scale, 1)); background: none; border: 0; border-radius: calc(8px * var(--ui-scale, 1)); color: var(--text-secondary); font-size: calc(14px * var(--ui-scale, 1)); }
.link-act:hover { background: var(--surface-raised); color: var(--text); }
.link-act.del { color: var(--danger); }
.admin-btn { min-height: calc(40px * var(--ui-scale, 1)); padding: calc(8px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)); background: var(--card-bg); border: 1px solid var(--border); border-radius: calc(10px * var(--ui-scale, 1)); color: var(--text); font-size: calc(14px * var(--ui-scale, 1)); }
.admin-btn:hover { border-color: var(--border-strong); background: var(--surface-raised); }
#bookmarkActions { display:flex;gap:calc(8px * var(--ui-scale, 1));justify-content:flex-end;margin-bottom:calc(20px * var(--ui-scale, 1)); }
#bookmarkActions:empty {display:none;}
.emoji-picker { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui-scale, 1)); }
.emoji-opt { min-width: calc(40px * var(--ui-scale, 1)); min-height: calc(40px * var(--ui-scale, 1)); display: grid; place-items: center; background: var(--surface-raised); border: 1px solid var(--border); border-radius: calc(8px * var(--ui-scale, 1)); }
.emoji-opt.selected { border-color: var(--accent); }
.import-preview { display: none; } .import-preview.show { display: block; }
.import-checklist { max-height: calc(240px * var(--ui-scale, 1)); overflow: auto; }
.import-item { display: flex; gap: calc(8px * var(--ui-scale, 1)); align-items: center; padding: calc(8px * var(--ui-scale, 1)); font-size: calc(14px * var(--ui-scale, 1)); }
.import-item .url { overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
@media (max-width: 1024px) {
  .container,.top-bar-inner { max-width: 100%; padding-left: 24px; padding-right: 24px; }
  .grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hero {gap:calc(24px * var(--ui-scale, 1));}
  .hero-left {gap:calc(12px * var(--ui-scale, 1));} .hero .logo {width:calc(48px * var(--ui-scale, 1));height:calc(48px * var(--ui-scale, 1));} .hero .logo svg {width:calc(44px * var(--ui-scale, 1));height:calc(44px * var(--ui-scale, 1));} .hero h1 {font-size:calc(32px * var(--ui-scale, 1));}
  .bm-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .container,.top-bar-inner { max-width: 100%; padding-left: 16px; padding-right: 16px; }
  .hero { padding:calc(24px * var(--ui-scale, 1)) 0;gap:calc(16px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:calc(24px * var(--ui-scale, 1)); }
  .hero-left { gap: calc(12px * var(--ui-scale, 1)); } .hero .logo { width: calc(40px * var(--ui-scale, 1)); height: calc(48px * var(--ui-scale, 1)); } .hero .logo svg { width: calc(40px * var(--ui-scale, 1)); height: calc(40px * var(--ui-scale, 1)); }
  .hero h1 {font-size:calc(30px * var(--ui-scale, 1));}
  .hero-center {display:none;}
  .hero-left {grid-column:1;grid-row:1;} .hero-right {grid-column:2;grid-row:1;max-width:100%;}
  .section {padding-bottom:calc(32px * var(--ui-scale, 1));}
  .top-bar .user-name {display:block;flex:0 1 auto;flex-basis:auto;max-width:100px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;}
  .top-bar-right {flex-wrap:nowrap;justify-content:flex-end;min-width:0;gap:6px;}
  .top-bar-brand {flex:none;}
  .top-bar-inner > div {align-items:center!important;justify-content:flex-end;gap:6px;min-width:0;}
  .top-bar .user-btn,.theme-toggle {flex-shrink:0;font-size:12px;padding:9px 10px;}
  .grid { grid-template-columns: repeat(auto-fit,minmax(max(calc(150px * var(--ui-scale, 1)),calc((100% - calc(12px * var(--ui-scale, 1))) / 2)),1fr)); gap: calc(12px * var(--ui-scale, 1)); }
  .card {display:grid;grid-template-columns:20px minmax(0,1fr);align-content:start;align-items:center;gap:8px 6px;min-height:88px;padding:12px;}
  .card-body {display:contents;}
  .card-icon {grid-column:1;grid-row:1;width:20px;height:20px;margin:0;}
  .card-icon svg {width:20px;height:20px;}
  .card-title {grid-column:2;grid-row:1;font-size:13px;line-height:1.4;margin:0;min-width:0;overflow-wrap:anywhere;}
  .card-desc {grid-column:1 / -1;font-size:12px;line-height:1.55;}
  .card-arrow {display:none;}
  .bm-grid { grid-template-columns: 1fr; } .link-act,.admin-btn { min-height: calc(44px * var(--ui-scale, 1)); min-width: calc(44px * var(--ui-scale, 1)); }
}

#bookmarkActions { flex-wrap:wrap; }
.order-modal { width:calc(640px * var(--ui-scale, 1)); } .order-hint { color:var(--text-secondary);font-size:calc(14px * var(--ui-scale, 1));margin-bottom:calc(16px * var(--ui-scale, 1)); }
.order-row { display:flex;gap:calc(8px * var(--ui-scale, 1));align-items:center;padding:calc(10px * var(--ui-scale, 1)) 0;border-bottom:1px solid var(--border); }
.order-row span { flex:1;min-width:0;font-size:calc(15px * var(--ui-scale, 1));overflow-wrap:anywhere; }
#orderStatus { min-height:calc(24px * var(--ui-scale, 1));color:var(--text-secondary);font-size:calc(14px * var(--ui-scale, 1));margin-top:calc(12px * var(--ui-scale, 1)); }

.bm-card[draggable="true"],.tool-sortable {cursor:grab;}
.is-dragging {opacity:.4;cursor:grabbing!important;}
.tool-sortable {user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.tool-sort-active .card {transition:none;transform:none;}
.tool-sort-placeholder {opacity:.3;border-color:var(--accent);}
.tool-sort-ghost {position:fixed;left:0;top:0;z-index:1000;pointer-events:none;margin:0;transition:none;cursor:grabbing;box-shadow:0 12px 36px #0005;border-color:var(--accent);}
.sort-sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
@media(max-width:380px){.hero-left{gap:calc(8px * var(--ui-scale, 1));}.hero .logo{width:calc(30px * var(--ui-scale, 1));}.hero .logo svg{width:calc(30px * var(--ui-scale, 1));}.hero h1{font-size:calc(27px * var(--ui-scale, 1));}.hero-clock{font-size:calc(28px * var(--ui-scale, 1));}}